Added Line Wrapping to Codeview of CodeMirror (#9563)

* Added Line Wrapping to Codeview of CodeMirror

In the formated code fields line breaks are not done, which requires
scrolling. This might be configurable in the future.

* Make line-wrapping an opt-in options

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>

app/src/interfaces/input-code/index.ts

@@ -48,6 +48,18 @@ export default defineInterface({
 					width: 'half',
 					interface: 'boolean',
 				},
+				schema: {
+					default_value: true,
+				},
+			},
+			{
+				field: 'lineWrapping',
+				name: '$t:interfaces.input-code.line_wrapping',
+				type: 'boolean',
+				meta: {
+					width: 'half',
+					interface: 'boolean',
+				},
 				schema: {
 					default_value: false,
 				},
@@ -75,7 +87,7 @@ export default defineInterface({
 				name: '$t:language',
 				type: 'string',
 				meta: {
-					width: 'half',
+					width: 'full',
 					interface: 'select-dropdown',
 					options: { choices },
 				},

app/src/interfaces/input-code/input-code.vue

@@ -51,6 +51,10 @@ export default defineComponent({
 			type: Boolean,
 			default: true,
 		},
+		lineWrapping: {
+			type: Boolean,
+			default: false,
+		},
 		placeholder: {
 			type: String,
 			default: null,
@@ -237,6 +241,7 @@ export default defineComponent({
 				defaultOptions,
 				{
 					lineNumbers: props.lineNumber,
+					lineWrapping: props.lineWrapping,
 					readOnly: props.disabled ? 'nocursor' : false,
 					mode: props.language,
 					placeholder: props.placeholder,