Add support to toggle text-wrapping in a code block

src/main/preferences/schema.json

@@ -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",

src/muya/lib/assets/styles/index.css

@@ -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

src/renderer/components/editorWithTabs/editor.vue

@@ -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)
  })
  },

src/renderer/prefComponents/editor/index.vue

@@ -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,

src/renderer/store/preferences.js

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

src/renderer/util/theme.js

@@ -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 = ''

static/preference.json

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