Merge pull request #581 from roipoussiere/line_wrap

editor: enable line wrapping

packages/react/src/components/CodeMirror6.jsx

@@ -88,12 +88,7 @@ const highlightField = StateField.define({
   provide: (f) => EditorView.decorations.from(f),
 });
 
-const staticExtensions = [
+const staticExtensions = [javascript(), highlightField, flashField];
-  javascript(),
-  highlightField,
-  flashField,
-  javascriptLanguage.data.of({ autocomplete: strudelAutocomplete }),
-];
 
 export default function CodeMirror({
   value,
@@ -104,6 +99,7 @@ export default function CodeMirror({
   keybindings,
   isLineNumbersDisplayed,
   isAutoCompletionEnabled,
+  isLineWrappingEnabled,
   fontSize = 18,
   fontFamily = 'monospace',
   options,
@@ -149,8 +145,12 @@ export default function CodeMirror({
       _extensions.push(autocompletion({ override: [] }));
     }
 
+    if (isLineWrappingEnabled) {
+      _extensions.push(EditorView.lineWrapping);
+    }
+
     return _extensions;
-  }, [keybindings, isAutoCompletionEnabled]);
+  }, [keybindings, isAutoCompletionEnabled, isLineWrappingEnabled]);
 
   return (
     <div style={{ fontSize, fontFamily }} className="w-full">

website/src/repl/Footer.jsx

@@ -364,7 +364,15 @@ const fontFamilyOptions = {
 };
 
 function SettingsTab({ scheduler }) {
-  const { theme, keybindings, isLineNumbersDisplayed, isAutoCompletionEnabled, fontSize, fontFamily } = useSettings();
+  const {
+    theme,
+    keybindings,
+    isLineNumbersDisplayed,
+    isAutoCompletionEnabled,
+    isLineWrappingEnabled,
+    fontSize,
+    fontFamily,
+  } = useSettings();
 
   return (
     <div className="text-foreground p-4 space-y-4">
@@ -407,7 +415,7 @@ function SettingsTab({ scheduler }) {
           />
         </FormItem>
       </div>
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
         <FormItem label="Keybindings">
           <ButtonGroup
             value={keybindings}
@@ -425,6 +433,11 @@ function SettingsTab({ scheduler }) {
           onChange={(cbEvent) => settingsMap.setKey('isAutoCompletionEnabled', cbEvent.target.checked)}
           value={isAutoCompletionEnabled}
         />
+        <Checkbox
+          label="Enable line wrapping"
+          onChange={(cbEvent) => settingsMap.setKey('isLineWrappingEnabled', cbEvent.target.checked)}
+          value={isLineWrappingEnabled}
+        />
       </div>
       <FormItem label="Reset Settings">
         <button

website/src/repl/Repl.jsx

@@ -105,7 +105,15 @@ export function Repl({ embedded = false }) {
   const [lastShared, setLastShared] = useState();
   const [pending, setPending] = useState(true);
 
-  const { theme, keybindings, fontSize, fontFamily, isLineNumbersDisplayed, isAutoCompletionEnabled } = useSettings();
+  const {
+    theme,
+    keybindings,
+    fontSize,
+    fontFamily,
+    isLineNumbersDisplayed,
+    isAutoCompletionEnabled,
+    isLineWrappingEnabled,
+  } = useSettings();
 
   const { code, setCode, scheduler, evaluate, activateCode, isDirty, activeCode, pattern, started, stop, error } =
     useStrudel({
@@ -273,6 +281,7 @@ export function Repl({ embedded = false }) {
             keybindings={keybindings}
             isLineNumbersDisplayed={isLineNumbersDisplayed}
             isAutoCompletionEnabled={isAutoCompletionEnabled}
+            isLineWrappingEnabled={isLineWrappingEnabled}
             fontSize={fontSize}
             fontFamily={fontFamily}
             onChange={handleChangeCode}

website/src/settings.mjs

@@ -6,6 +6,7 @@ export const defaultSettings = {
   keybindings: 'codemirror',
   isLineNumbersDisplayed: true,
   isAutoCompletionEnabled: false,
+  isLineWrappingEnabled: false,
   theme: 'strudelTheme',
   fontFamily: 'monospace',
   fontSize: 18,
@@ -23,6 +24,7 @@ export function useSettings() {
     isZen: [true, 'true'].includes(state.isZen) ? true : false,
     isLineNumbersDisplayed: [true, 'true'].includes(state.isLineNumbersDisplayed) ? true : false,
     isAutoCompletionEnabled: [true, 'true'].includes(state.isAutoCompletionEnabled) ? true : false,
+    isLineWrappingEnabled: [true, 'true'].includes(state.isLineWrappingEnabled) ? true : false,
     fontSize: Number(state.fontSize),
   };
 }