feat: 支持自动换行

Author: Flex-7746

frontend/package-lock.json

@@ -25,7 +25,19 @@
       <div class="item">
         <div class="label">字体大小</div>
         <div class="value">
-          <el-input-number v-model="like.fontSize" :min="8" :max="100" size="small" />
+          <el-input-number v-model="like.editorOption.fontSize" :min="8" :max="100" size="small" />
+        </div>
+      </div>
+
+      <div class="item">
+        <div class="label">自动换行</div>
+        <div class="value">
+          <el-switch
+            v-model="like.editorOption.wordWrap"
+            inline-prompt
+            active-value="on"
+            inactive-value="off"
+          />
         </div>
       </div>
     </div>
@@ -36,7 +48,9 @@
 
         <div style="flex: 1"></div>
 
-        <div style="font-size: 12px; color: var(--el-text-color-placeholder)">修改实时生效，且进行缓存</div>
+        <div style="font-size: 12px; color: var(--el-text-color-placeholder)">
+          修改实时生效，且进行缓存
+        </div>
       </div>
     </template>
   </el-dialog>

frontend/src/components/LikeDialog.vue

@@ -5,7 +5,7 @@
       v-model:value="code.value"
       :language="code.lang"
       :theme="like.theme"
-      :options="{ fontSize: 14, automaticLayout: true }"
+      :options="{ automaticLayout: true, ...editorLike.editorOption }"
       @editorDidMount="editorDidMount"
     />
   </div>
@@ -78,7 +78,7 @@ const { code, save } = useCode({
   onSave: () => $emit('diff', false),
 })
 
-const { editorDidMount, changeLang, changeTheme, changeSize } = useEditor({ onSave: save })
+const { editorDidMount, changeLang, changeTheme, changeOption } = useEditor({ onSave: save })
 
 const changeEncode = async (v: string) => {
   const buffer = await code.blob.arrayBuffer()
@@ -99,16 +99,16 @@ watch(
   },
 )
 watch(
-  () => $props.like.fontSize,
+  () => code.value,
   (v) => {
-    editorLike.fontSize = v
-    changeSize(v)
+    $emit('diff', v !== code.org)
   },
 )
 watch(
-  () => code.value,
+  () => $props.like.editorOption,
   (v) => {
-    $emit('diff', v !== code.org)
+    editorLike.editorOption = v
+    changeOption(v)
   },
 )
 </script>

frontend/src/components/MonacoEditor.vue

@@ -24,18 +24,18 @@ export default function useEditor(option: { onSave: () => void }) {
     monaco.editor.setModelLanguage(toRaw(editorInstance.value.getModel()), v)
   }
 
-  const changeSize = (size: number) => {
-    editorInstance.value.updateOptions({ fontSize: size })
-  }
-
   const changeTheme = (v: string) => {
     monaco.editor.setTheme(v)
   }
 
+  const changeOption = (opt: any) => {
+    editorInstance.value.updateOptions(opt)
+  }
+
   return {
     editorDidMount,
     changeLang,
-    changeSize,
     changeTheme,
+    changeOption,
   }
 }

frontend/src/hooks/useEditor.ts

@@ -5,14 +5,20 @@ import { THEME_OPTIONS } from '@/utils/option'
 
 export interface LikeModel {
   theme: string
-  fontSize: number
   confirm: boolean
+  editorOption: {
+    fontSize: number
+    wordWrap: 'off' | 'on'
+  }
 }
 
 const defLike: LikeModel = {
   theme: 'vs-dark',
-  fontSize: 14,
   confirm: true,
+  editorOption: {
+    fontSize: 14,
+    wordWrap: 'off',
+  },
 }
 
 const key = 'like_v1'