mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-13 17:56:25 +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,
|
tabSize: this.props.indentSize,
|
||||||
indentWithTabs: this.props.indentType !== 'space',
|
indentWithTabs: this.props.indentType !== 'space',
|
||||||
keyMap: this.props.keyMap,
|
keyMap: this.props.keyMap,
|
||||||
|
scrollPastEnd: this.props.scrollPastEnd,
|
||||||
inputStyle: 'textarea',
|
inputStyle: 'textarea',
|
||||||
dragDrop: false,
|
dragDrop: false,
|
||||||
extraKeys: {
|
extraKeys: {
|
||||||
@@ -153,6 +154,10 @@ export default class CodeEditor extends React.Component {
|
|||||||
this.editor.setOption('indentWithTabs', this.props.indentType !== 'space')
|
this.editor.setOption('indentWithTabs', this.props.indentType !== 'space')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (prevProps.scrollPastEnd !== this.props.scrollPastEnd) {
|
||||||
|
this.editor.setOption('scrollPastEnd', this.props.scrollPastEnd);
|
||||||
|
}
|
||||||
|
|
||||||
if (needRefresh) {
|
if (needRefresh) {
|
||||||
this.editor.refresh()
|
this.editor.refresh()
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -242,6 +242,7 @@ class MarkdownEditor extends React.Component {
|
|||||||
fontSize={editorFontSize}
|
fontSize={editorFontSize}
|
||||||
indentType={config.editor.indentType}
|
indentType={config.editor.indentType}
|
||||||
indentSize={editorIndentSize}
|
indentSize={editorIndentSize}
|
||||||
|
scrollPastEnd={config.editor.scrollPastEnd}
|
||||||
storageKey={storageKey}
|
storageKey={storageKey}
|
||||||
onChange={(e) => this.handleChange(e)}
|
onChange={(e) => this.handleChange(e)}
|
||||||
onBlur={(e) => this.handleBlur(e)}
|
onBlur={(e) => this.handleBlur(e)}
|
||||||
@@ -259,6 +260,7 @@ class MarkdownEditor extends React.Component {
|
|||||||
codeBlockFontFamily={config.editor.fontFamily}
|
codeBlockFontFamily={config.editor.fontFamily}
|
||||||
lineNumber={config.preview.lineNumber}
|
lineNumber={config.preview.lineNumber}
|
||||||
indentSize={editorIndentSize}
|
indentSize={editorIndentSize}
|
||||||
|
scrollPastEnd={config.editor.scrollPastEnd}
|
||||||
ref='preview'
|
ref='preview'
|
||||||
onContextMenu={(e) => this.handleContextMenu(e)}
|
onContextMenu={(e) => this.handleContextMenu(e)}
|
||||||
tabIndex='0'
|
tabIndex='0'
|
||||||
|
|||||||
@@ -157,6 +157,7 @@ class NoteDetail extends React.Component {
|
|||||||
indentType={config.editor.indentType}
|
indentType={config.editor.indentType}
|
||||||
indentSize={editorIndentSize}
|
indentSize={editorIndentSize}
|
||||||
keyMap={config.editor.keyMap}
|
keyMap={config.editor.keyMap}
|
||||||
|
scrollPastEnd={config.editor.scrollPastEnd}
|
||||||
readOnly
|
readOnly
|
||||||
ref={'code-' + index}
|
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) {
|
handleTabDeleteButtonClick (e, index) {
|
||||||
if (this.state.note.snippets.length > 1) {
|
if (this.state.note.snippets.length > 1) {
|
||||||
if (this.state.note.snippets[index].content.trim().length > 0) {
|
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)}
|
onDelete={(e) => this.handleTabDeleteButtonClick(e, index)}
|
||||||
onRename={(name) => this.renameSnippetByIndex(index, name)}
|
onRename={(name) => this.renameSnippetByIndex(index, name)}
|
||||||
isDeletable={note.snippets.length > 1}
|
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}
|
indentType={config.editor.indentType}
|
||||||
indentSize={editorIndentSize}
|
indentSize={editorIndentSize}
|
||||||
keyMap={config.editor.keyMap}
|
keyMap={config.editor.keyMap}
|
||||||
|
scrollPastEnd={config.editor.scrollPastEnd}
|
||||||
onChange={(e) => this.handleCodeChange(index)(e)}
|
onChange={(e) => this.handleCodeChange(index)(e)}
|
||||||
ref={'code-' + index}
|
ref={'code-' + index}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -34,7 +34,8 @@ export const DEFAULT_CONFIG = {
|
|||||||
fontFamily: win ? 'Segoe UI' : 'Monaco, Consolas',
|
fontFamily: win ? 'Segoe UI' : 'Monaco, Consolas',
|
||||||
indentType: 'space',
|
indentType: 'space',
|
||||||
indentSize: '2',
|
indentSize: '2',
|
||||||
switchPreview: 'BLUR' // Available value: RIGHTCLICK, BLUR
|
switchPreview: 'BLUR', // Available value: RIGHTCLICK, BLUR
|
||||||
|
scrollPastEnd: false
|
||||||
},
|
},
|
||||||
preview: {
|
preview: {
|
||||||
fontSize: '14',
|
fontSize: '14',
|
||||||
|
|||||||
@@ -73,7 +73,8 @@ class UiTab extends React.Component {
|
|||||||
indentType: this.refs.editorIndentType.value,
|
indentType: this.refs.editorIndentType.value,
|
||||||
indentSize: this.refs.editorIndentSize.value,
|
indentSize: this.refs.editorIndentSize.value,
|
||||||
switchPreview: this.refs.editorSwitchPreview.value,
|
switchPreview: this.refs.editorSwitchPreview.value,
|
||||||
keyMap: this.refs.editorKeyMap.value
|
keyMap: this.refs.editorKeyMap.value,
|
||||||
|
scrollPastEnd: this.refs.scrollPastEnd.checked
|
||||||
},
|
},
|
||||||
preview: {
|
preview: {
|
||||||
fontSize: this.refs.previewFontSize.value,
|
fontSize: this.refs.previewFontSize.value,
|
||||||
@@ -278,6 +279,17 @@ class UiTab extends React.Component {
|
|||||||
</div>
|
</div>
|
||||||
</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-header2'>Preview</div>
|
||||||
<div styleName='group-section'>
|
<div styleName='group-section'>
|
||||||
<div styleName='group-section-label'>
|
<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/search.js"></script>
|
||||||
<script src="../node_modules/codemirror/addon/search/searchcursor.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/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/matchesonscrollbar.js"></script>
|
||||||
<script src="../node_modules/codemirror/addon/search/jump-to-line.js"></script>
|
<script src="../node_modules/codemirror/addon/search/jump-to-line.js"></script>
|
||||||
<script src="../node_modules/codemirror/addon/dialog/dialog.js"></script>
|
<script src="../node_modules/codemirror/addon/dialog/dialog.js"></script>
|
||||||
|
|||||||
Reference in New Issue
Block a user