Merge e75af05100 into 14dde3c283

src/App.tsx

@@ -35,6 +35,8 @@ import ConnectionStatus from "./ConnectionStatus";
 import Footer from "./Footer";
 import User from "./User";
 
+type WordWrap = typeof editor.EditorOptions.wordWrap.defaultValue;
+
 function getWsUri(id: string) {
   return (
     (window.location.origin.startsWith("https") ? "wss://" : "ws://") +
@@ -62,6 +64,7 @@ function App() {
   const [hue, setHue] = useStorage("hue", generateHue);
   const [editor, setEditor] = useState<editor.IStandaloneCodeEditor>();
   const [darkMode, setDarkMode] = useStorage("darkMode", () => false);
+  const [wordWrap, setWordWrap] = useState<WordWrap>("on");
   const rustpad = useRef<Rustpad>();
   const id = useHash();
 
@@ -194,6 +197,23 @@ function App() {
             <Switch isChecked={darkMode} onChange={handleDarkMode} />
           </Flex>
 
+          <Heading mt={4} mb={1.5} size="sm">
+            Word Wrap
+          </Heading>
+          <Select
+            size="sm"
+            bgColor={darkMode ? "#3c3c3c" : "white"}
+            borderColor={darkMode ? "#3c3c3c" : "white"}
+            value={wordWrap}
+            onChange={(event) => setWordWrap(event.target.value as WordWrap)}
+          >
+            {["off", "on", "wordWrapColumn", "bounded"].map((value) => (
+              <option key={value} value={value} style={{ color: "black" }}>
+                {value}
+              </option>
+            ))}
+          </Select>
+
           <Heading mt={4} mb={1.5} size="sm">
             Language
           </Heading>
@@ -312,6 +332,7 @@ function App() {
               options={{
                 automaticLayout: true,
                 fontSize: 13,
+                wordWrap: wordWrap,
               }}
               onMount={(editor) => setEditor(editor)}
             />