Merge 4e159bc9ed into 11c8cc1e19

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,