This commit is contained in:
Ivan Melnikov 2024-06-12 17:44:36 +00:00 committed by GitHub
commit a63c45fb85
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 42 additions and 10 deletions

View File

@ -92,6 +92,11 @@
"minimum": 1.2,
"default": 1.6
},
"wrapCodeBlocks": {
"description": "Editor--Wrap text inside code blocks",
"type": "boolean",
"default": true
},
"editorLineWidth": {
"description": "Editor--Defines the maximum editor area width. An empty string or suffixes of ch (characters), px (pixels) or % (percentage) are allowed.",
"type": "string",

View File

@ -89,20 +89,12 @@ div.ag-show-quick-insert-hint p.ag-paragraph.ag-active > span.ag-paragraph-conte
.ag-atx-line,
.ag-thematic-break-line,
.ag-paragraph-content,
.ag-code-content {
.ag-paragraph-content {
display: block;
white-space: pre-wrap;
word-break: break-word;
}
/* TODO: This disables wrapping long lines in code blocks, allowing
scrolling instead. Make this contingent on user preference. */
.ag-code-content {
overflow: auto;
white-space: pre;
}
.ag-code-content::-webkit-scrollbar {
/* Show scroll bars to deal with unwrapped lines in code blocks,
regardless of the preference for hiding scroll bars

View File

@ -104,7 +104,7 @@ import { isOsx, animatedScrollTo } from '@/util'
import { moveImageToFolder, moveToRelativeFolder, uploadImage } from '@/util/fileSystem'
import { guessClipboardFilePath } from '@/util/clipboard'
import { getCssForOptions, getHtmlToc } from '@/util/pdf'
import { addCommonStyle, setEditorWidth } from '@/util/theme'
import { addCommonStyle, setEditorWidth, setWrapCodeBlocks } from '@/util/theme'
import 'muya/themes/default.css'
import '@/assets/themes/codemirror/one-dark.css'
@ -155,6 +155,7 @@ export default {
hideLinkPopup: state => state.preferences.hideLinkPopup,
autoCheck: state => state.preferences.autoCheck,
editorLineWidth: state => state.preferences.editorLineWidth,
wrapCodeBlocks: state => state.preferences.wrapCodeBlocks,
imageInsertAction: state => state.preferences.imageInsertAction,
imagePreferRelativeDirectory: state => state.preferences.imagePreferRelativeDirectory,
imageRelativeDirectoryName: state => state.preferences.imageRelativeDirectoryName,
@ -314,6 +315,12 @@ export default {
}
},
wrapCodeBlocks: function (value, oldValue) {
if (value !== oldValue) {
setWrapCodeBlocks(value)
}
},
autoPairBracket: function (value, oldValue) {
const { editor } = this
if (value !== oldValue && editor) {
@ -477,6 +484,7 @@ export default {
isHtmlEnabled,
isGitlabCompatibilityEnabled,
hideQuickInsertHint,
wrapCodeBlocks,
editorLineWidth,
theme,
sequenceTheme,
@ -660,6 +668,7 @@ export default {
document.addEventListener('keyup', this.keyup)
setWrapCodeBlocks(wrapCodeBlocks)
setEditorWidth(editorLineWidth)
})
},

View File

@ -159,6 +159,11 @@
:bool="autoCheck"
:onChange="value => onSelectChange('autoCheck', value)"
></bool>
<bool
description="Wrap text inside code blocks"
:bool="wrapCodeBlocks"
:onChange="value => onSelectChange('wrapCodeBlocks', value)"
></bool>
</template>
</compound>
</div>
@ -217,6 +222,7 @@ export default {
hideQuickInsertHint: state => state.preferences.hideQuickInsertHint,
hideLinkPopup: state => state.preferences.hideLinkPopup,
autoCheck: state => state.preferences.autoCheck,
wrapCodeBlocks: state => state.preferences.wrapCodeBlocks,
editorLineWidth: state => state.preferences.editorLineWidth,
defaultEncoding: state => state.preferences.defaultEncoding,
autoGuessEncoding: state => state.preferences.autoGuessEncoding,

View File

@ -23,6 +23,7 @@ const state = {
codeFontFamily: 'DejaVu Sans Mono',
codeBlockLineNumbers: true,
trimUnnecessaryCodeBlockEmptyLines: true,
wrapCodeBlocks: true,
editorLineWidth: '',
autoPairBracket: true,

View File

@ -103,6 +103,24 @@ export const addThemeStyle = theme => {
}
}
export const setWrapCodeBlocks = value => {
const CODE_WRAP_STYLE_ID = 'ag-code-wrap'
let result = ''
if (value) {
result = '.ag-code-content { display: block; white-space: pre-wrap; word-break: break-word; overflow: hidden; }'
} else {
result = '.ag-code-content { display: block; white-space: pre; word-break: break-word; overflow: auto; }'
}
let styleEle = document.querySelector(`#${CODE_WRAP_STYLE_ID}`)
if (!styleEle) {
styleEle = document.createElement('style')
styleEle.setAttribute('id', CODE_WRAP_STYLE_ID)
document.head.appendChild(styleEle)
}
styleEle.innerHTML = result
}
export const setEditorWidth = value => {
const EDITOR_WIDTH_STYLE_ID = 'editor-width'
let result = ''

View File

@ -19,6 +19,7 @@
"codeFontFamily": "DejaVu Sans Mono",
"codeBlockLineNumbers": true,
"trimUnnecessaryCodeBlockEmptyLines": true,
"wrapCodeBlocks": false,
"editorLineWidth": "",
"autoPairBracket": true,