From 39e77dc2cc0f6a9d15aba140651870b62bda8595 Mon Sep 17 00:00:00 2001
From: zockicookie <133583695+zockicookie@users.noreply.github.com>
Date: Thu, 5 Sep 2024 23:45:09 +0200
Subject: [PATCH] Markdown-Editor-LineWrapping (#3908)

* Markdown-Editor-LineWrapping

* added lineWrapping to js and css editors

---------

Co-authored-by: Gabe Kangas <gabek@real-ity.com>
---
 web/components/admin/EditCustomJavascript.tsx               | 4 ++--
 web/components/admin/EditCustomStyles.tsx                   | 4 ++--
 web/components/admin/config/general/EditInstanceDetails.tsx | 4 ++--
 web/components/admin/config/general/EditPageContent.tsx     | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/web/components/admin/EditCustomJavascript.tsx b/web/components/admin/EditCustomJavascript.tsx
index 7b54f8e9e9..565b4783b8 100644
--- a/web/components/admin/EditCustomJavascript.tsx
+++ b/web/components/admin/EditCustomJavascript.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useContext, FC } from 'react';
 import { Typography, Button } from 'antd';
-import CodeMirror from '@uiw/react-codemirror';
+import CodeMirror, { EditorView } from '@uiw/react-codemirror';
 import { bbedit } from '@uiw/codemirror-theme-bbedit';
 import { javascript } from '@codemirror/lang-javascript';
 
@@ -98,7 +98,7 @@ export const EditCustomJavascript: FC = () => {
         placeholder="/* Enter custom Javascript here */"
         theme={bbedit}
         height="200px"
-        extensions={[javascript()]}
+        extensions={[javascript(), EditorView.lineWrapping]}
         onChange={onValueChange}
       />
 
diff --git a/web/components/admin/EditCustomStyles.tsx b/web/components/admin/EditCustomStyles.tsx
index d9e5f3947a..9556b05f1d 100644
--- a/web/components/admin/EditCustomStyles.tsx
+++ b/web/components/admin/EditCustomStyles.tsx
@@ -1,7 +1,7 @@
 // EDIT CUSTOM CSS STYLES
 import React, { useState, useEffect, useContext, FC } from 'react';
 import { Typography, Button } from 'antd';
-import CodeMirror from '@uiw/react-codemirror';
+import CodeMirror, { EditorView } from '@uiw/react-codemirror';
 import { bbedit } from '@uiw/codemirror-theme-bbedit';
 import { css } from '@codemirror/lang-css';
 
@@ -101,7 +101,7 @@ export const EditCustomStyles: FC = () => {
         placeholder="/* Enter custom CSS here */"
         theme={bbedit}
         height="200px"
-        extensions={[css()]}
+        extensions={[css(), EditorView.lineWrapping]}
         onChange={onCSSValueChange}
       />
 
diff --git a/web/components/admin/config/general/EditInstanceDetails.tsx b/web/components/admin/config/general/EditInstanceDetails.tsx
index 642846d38b..0545d04ea7 100644
--- a/web/components/admin/config/general/EditInstanceDetails.tsx
+++ b/web/components/admin/config/general/EditInstanceDetails.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useContext, useEffect, FC } from 'react';
 import { Button, Modal, Typography } from 'antd';
 import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
-import CodeMirror from '@uiw/react-codemirror';
+import CodeMirror, { EditorView } from '@uiw/react-codemirror';
 import { bbedit } from '@uiw/codemirror-theme-bbedit';
 import { languages } from '@codemirror/language-data';
 import {
@@ -241,7 +241,7 @@ export default function EditInstanceDetails() {
             onChange={value => {
               handleFieldChange({ fieldName: 'offlineMessage', value });
             }}
-            extensions={[markdown({ base: markdownLanguage, codeLanguages: languages })]}
+            extensions={[markdown({ base: markdownLanguage, codeLanguages: languages }), EditorView.lineWrapping]}
           />
         </div>
         <div className="field-tip">
diff --git a/web/components/admin/config/general/EditPageContent.tsx b/web/components/admin/config/general/EditPageContent.tsx
index 8275f302ba..e101619d20 100644
--- a/web/components/admin/config/general/EditPageContent.tsx
+++ b/web/components/admin/config/general/EditPageContent.tsx
@@ -1,7 +1,7 @@
 // EDIT CUSTOM DETAILS ON YOUR PAGE
 import React, { useState, useEffect, useContext } from 'react';
 import { Typography, Button } from 'antd';
-import CodeMirror from '@uiw/react-codemirror';
+import CodeMirror, { EditorView } from '@uiw/react-codemirror';
 import { bbedit } from '@uiw/codemirror-theme-bbedit';
 import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 import { languages } from '@codemirror/language-data';
@@ -103,7 +103,7 @@ export default function EditPageContent() {
         theme={bbedit}
         height="200px"
         onChange={handleEditorChange}
-        extensions={[markdown({ base: markdownLanguage, codeLanguages: languages })]}
+        extensions={[markdown({ base: markdownLanguage, codeLanguages: languages }), EditorView.lineWrapping]}
       />
 
       <br />