perf: add CodeMirror lineWrap support, fix base styling

riccardoperra · Feb 6, 2022 · 51f0082 · 51f0082
1 parent 428fb82
commit 51f0082
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 37 deletions.
diff --git a/apps/codegram/src/App.tsx b/apps/codegram/src/App.tsx
@@ -1,45 +1,14 @@
 import styles from './App.module.css';
 import {Terminal} from './components/Terminal/Terminal';
 import {Frame} from './components/Frame/Frame';
-import {EditorView} from '@codemirror/view';
-import {createSignal} from 'solid-js';
-import {CodeMirror} from '@local/solid-codemirror';
+import {CustomEditor} from './components/CustomEditor/CustomEditor';
 
 const App = () => {
-  let editor: HTMLElement;
-  const [value, setValue] = createSignal('test');
-
-  const theme = EditorView.theme(
-    {
-      '&': {
-        fontFamily: 'Source Code Pro, monospace',
-      },
-      '.cm-activeLine': {
-        backgroundColor: 'transparent',
-        color: 'white',
-      },
-      '.cm-content': {
-        fontFamily: 'Source Code Pro, monospace',
-        textAlign: 'left',
-      },
-      '.cm-gutters': {
-        display: 'none',
-      },
-    },
-    {dark: true},
-  );
-
   return (
     <div class={styles.App}>
       <Frame>
         <Terminal>
-          <CodeMirror
-            value={value()}
-            extensions={[theme]}
-            editable={true}
-            basicSetup={true}
-            onChange={setValue}
-          />
+          <CustomEditor />
         </Terminal>
       </Frame>
     </div>

diff --git a/apps/codegram/src/components/CustomEditor/CustomEditor.tsx b/apps/codegram/src/components/CustomEditor/CustomEditor.tsx
@@ -0,0 +1,37 @@
+import {CodeMirror} from '@local/solid-codemirror';
+import {createSignal} from 'solid-js';
+import {EditorView} from '@codemirror/view';
+
+export const CustomEditor = () => {
+  const [value, setValue] = createSignal('Hello world');
+  const supportsLineWrap = EditorView.lineWrapping;
+  const baseTheme = EditorView.theme(
+    {
+      '&': {
+        fontFamily: 'Source Code Pro, monospace',
+      },
+      '.cm-activeLine': {
+        backgroundColor: 'transparent',
+        color: 'white',
+      },
+      '.cm-content': {
+        fontFamily: 'Source Code Pro, monospace',
+        textAlign: 'left',
+      },
+      '.cm-gutters': {
+        display: 'none',
+      },
+    },
+    {dark: true},
+  );
+
+  return (
+    <CodeMirror
+      value={value()}
+      extensions={[baseTheme, supportsLineWrap]}
+      editable={true}
+      basicSetup={true}
+      onChange={setValue}
+    />
+  );
+};
diff --git a/apps/codegram/src/components/Frame/Frame.module.scss b/apps/codegram/src/components/Frame/Frame.module.scss
@@ -1,15 +1,16 @@
 .frame {
   --frame-width: 0px;
   width: var(--frame-width);
-  height: 150px;
-  background-color: gray;
+  height: auto;
+  background-color: #e2e8f0;
   padding: 128px;
   position: relative;
   min-width: 520px;
   min-height: 154px;
   max-width: 920px;
   user-select: none;
   z-index: 1;
+  box-sizing: border-box;
 }
 
 .dragControlPoints {
@@ -56,4 +57,4 @@
       right: calc(var(--control-handle-size) / 2 * -1);
     }
   }
-}
+}
diff --git a/apps/codegram/src/components/Terminal/terminal.css.ts b/apps/codegram/src/components/Terminal/terminal.css.ts
@@ -17,7 +17,6 @@ export const wrapper = style([
     position: 'relative',
     backgroundColor: terminalVars.backgroundColor,
     overflow: 'hidden',
-    minWidth: '300px',
     borderRadius: themeVars.borderRadius.lg,
   },
 ]);
@@ -30,6 +29,7 @@ export const content = style({
   paddingBottom: themeVars.spacing['4'],
   paddingTop: themeVars.spacing['5'],
   paddingInlineStart: themeVars.spacing['4'],
+  paddingInlineEnd: themeVars.spacing['4'],
 });
 
 export const header = style({