增加自动换行切换功能

README.md

@@ -31,6 +31,7 @@
 + 删除文件/目录：`Shift + 右键文件/目录`
 + 重命名文件/目录：`Ctrl + 右键文件/目录`
 + 切换文档预览显示：`Alt + V` 或点击状态栏 `切换预览` 按钮
++ 切换编辑器自动换行：`Alt + W` 或点击状态栏 `切换换行` 按钮
 + 将外链或 BASE64 图片转换为本地图片：`Ctrl + Shift + 单击图片`
 + 默认文件存储在 `./data` 目录下，添加更多仓库请编辑 `./config.json` 文件
 + 默认快捷键参考 [vscode](https://code.visualstudio.com/)

frontend/src/components/Editor.vue

@@ -28,11 +28,13 @@ export default {
     }
     window.addEventListener('resize', this.resize)
     this.$bus.on('editor-replace-value', this.replaceValue)
+    this.$bus.on('editor-toggle-wrap', this.toggleWrap)
   },
   beforeDestroy () {
     window.removeEventListener('paste', this.paste)
     window.removeEventListener('resize', this.resize)
     this.$bus.off('editor-replace-value', this.replaceValue)
+    this.$bus.off('editor-toggle-wrap', this.toggleWrap)
   },
   methods: {
     resize () {
@@ -51,7 +53,7 @@ export default {
         language: 'markdown',
         theme: 'vs-dark',
         fontSize: '20',
-        wordWrap: true,
+        wordWrap: false,
         // wordWrapColumn: 40,
         // Set this to false to not auto word wrap minified files
         wordWrapMinified: true,
@@ -221,6 +223,10 @@ export default {
     setPosition (position) {
       console.log(position)
       this.editor.setScrollTop(0)
+    },
+    toggleWrap () {
+      const isWrapping = this.editor.getConfiguration().wrappingInfo.isViewportWrapping
+      this.editor.updateOptions({wordWrap: !isWrapping})
     }
   }
 }

frontend/src/components/RepositorySwitch.vue

@@ -66,6 +66,7 @@ export default {
 .repository-switch {
   width: 100px;
   cursor: pointer;
+  user-select: none;
 }
 
 .current {

frontend/src/components/StatusBar.vue

@@ -3,6 +3,7 @@
     <RepositorySwitch class="left"></RepositorySwitch>
 
     <div class="view-control right" @click="toggleView">切换预览</div>
+    <div class="wrap-control right" @click="toggleWrap">切换换行</div>
     <div class="document-info right">
       <span>行：{{documentInfo.line}}</span>
       <span>列：{{documentInfo.column}}</span>
@@ -49,12 +50,21 @@ export default {
     toggleView () {
       this.$bus.emit('toggle-view')
     },
+    toggleWrap () {
+      this.$bus.emit('editor-toggle-wrap')
+    },
     keydownHandler (e) {
       if (e.key === 'v' && e.altKey) {
         this.toggleView()
         e.preventDefault()
         e.stopPropagation()
       }
+
+      if (e.key === 'w' && e.altKey) {
+        this.toggleWrap()
+        e.preventDefault()
+        e.stopPropagation()
+      }
     }
   },
   watch: {
@@ -87,13 +97,14 @@ export default {
   padding: 0 .2em;
 }
 
-.view-control {
+.view-control, .wrap-control {
   padding: 0 .5em;
-  margin-left: 1em;
+  /* margin-left: 1em; */
   cursor: pointer;
+  user-select: none;
 }
 
-.view-control:hover {
+.view-control:hover, .wrap-control:hover {
   background: #2e2e2e;
 }
 </style>