update code block

githubnext · Aug 12, 2022 · 430a601 · 430a601
1 parent 59895c7
commit 430a601
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 47 deletions.
diff --git a/blocks/file-blocks/code/index.tsx b/blocks/file-blocks/code/index.tsx
@@ -33,10 +33,13 @@ import {
 } from "@codemirror/language";
 import { languages } from "@codemirror/language-data";
 import interact from "@replit/codemirror-interact";
+import { vim } from "@replit/codemirror-vim";
+import { indentationMarkers } from "@replit/codemirror-indentation-markers";
 import { theme } from "./theme";
 
 const languageCompartment = new Compartment();
 const isEditableCompartment = new Compartment();
+const vimModeCompartment = new Compartment();
 
 const extensions = [
   lineNumbers(),
@@ -55,6 +58,7 @@ const extensions = [
   rectangularSelection(),
   highlightActiveLine(),
   highlightSelectionMatches(),
+  indentationMarkers(),
   interact({
     rules: [
       // dragging numbers
@@ -84,22 +88,19 @@ const extensions = [
 ];
 
 export default function (props: FileBlockProps) {
-  const {
-    content,
-    context: { path },
-    isEditable,
-    onUpdateContent,
-  } = props;
+  const { content, context, isEditable, onUpdateContent } = props;
 
   const editorRef = React.useRef<HTMLDivElement>(null);
   const viewRef = React.useRef<EditorView>();
+  const [isUsingVim, setIsUsingVim] = React.useState(false);
 
   React.useEffect(() => {
     if (viewRef.current || !editorRef.current) return;
 
     const state = EditorState.create({
       doc: content,
       extensions: [
+        vimModeCompartment.of(isUsingVim ? vim() : []),
         extensions,
         EditorView.updateListener.of((v) => {
           if (
@@ -137,7 +138,7 @@ export default function (props: FileBlockProps) {
     if (!viewRef.current) return;
     const view = viewRef.current;
 
-    const language = LanguageDescription.matchFilename(languages, path);
+    const language = LanguageDescription.matchFilename(languages, context.path);
 
     if (language) {
       language.load().then((lang) => {
@@ -146,7 +147,7 @@ export default function (props: FileBlockProps) {
         });
       });
     }
-  }, [path]);
+  }, [context.path]);
 
   React.useEffect(() => {
     if (!viewRef.current) return;
@@ -160,9 +161,49 @@ export default function (props: FileBlockProps) {
   }, [isEditable]);
 
   return (
-    <div
-      className={tw(`relative w-full h-full overflow-auto`)}
-      ref={editorRef}
-    />
+    <div className={tw("relative w-full h-full")}>
+      {isEditable && (
+        <button
+          className={tw`absolute top-3 right-3 z-50 appearance-none`}
+          style={{
+            opacity: isUsingVim ? 1 : 0.5,
+            filter: isUsingVim ? "" : "grayscale(100%)",
+          }}
+          title={isUsingVim ? "Disable Vim Mode" : "Enable Vim Mode"}
+          onClick={() => {
+            const newIsUsingVim = !isUsingVim;
+            setIsUsingVim(newIsUsingVim);
+            if (!viewRef.current) return;
+            viewRef.current.dispatch({
+              effects: vimModeCompartment.reconfigure(
+                newIsUsingVim ? vim() : []
+              ),
+            });
+            viewRef.current.focus();
+          }}
+        >
+          {/* the vim logo */}
+          <svg width="2em" viewBox="0 0 544.8642 544.8642">
+            <g transform="translate(-69.980994,-160.33288) matrix(1.532388,0,0,1.3939671,-54.912136,-41.792396)">
+              <path
+                d="M 260.50744,170.69515 105.98412,340.79094 259.8636,510.178 414.38691,340.08221 260.50744,170.69515 z"
+                fill="#019833"
+              ></path>
+              <path
+                transform="matrix(0.90138601,0,0,0.99222542,-437.42287,-185.30615)"
+                d="m 828.9375,369.5 -4.28125,4.28125 0,15.71875 3.75,3.75 19.8125,0 0,15.1875 -131.0625,132.84375 0,-147.84375 21.78125,0 4.46875,-4.46875 0,-15.90625 -4.125,-3.1875 -114.625,0 -3.75,3.75 0,16.25 3.8125,3.8125 19.9375,0 0,272.25 3.75,3.75 22.65625,0 274.65625,-283.40625 0,-12.5 -4.28125,-4.28125 -112.5,0 z"
+                fill="#cccccc"
+              ></path>
+            </g>
+          </svg>
+        </button>
+      )}
+
+      <div
+        className={tw(`relative w-full h-full overflow-auto`)}
+        key={context.path}
+        ref={editorRef}
+      />
+    </div>
   );
 }
diff --git a/blocks/file-blocks/code/style.css b/blocks/file-blocks/code/style.css
@@ -9,8 +9,7 @@ body,
 }
 
 .cm-editor {
-  padding: 2em 1em 10em;
-  max-width: 70em;
+  padding: 1em 1em 10em;
   min-height: 100%;
   margin: 0 auto;
   outline: none !important;

diff --git a/blocks/file-blocks/code/theme.tsx b/blocks/file-blocks/code/theme.tsx
@@ -79,6 +79,15 @@ export const oneDarkTheme = EditorView.theme(
         color: colors.text,
       },
     },
+    ".cm-fat-cursor": {
+      background: `${colors.selectionBg} !important`,
+    },
+    "&:not(.cm-focused) .cm-fat-cursor": {
+      outline: `solid 1px ${colors.selectionBg} !important`,
+    },
+    ".cm-indentation-marker": {
+      opacity: 0.3,
+    },
   },
   { dark: true }
 );

diff --git a/blocks/file-blocks/markdown-edit/index.tsx b/blocks/file-blocks/markdown-edit/index.tsx
@@ -47,7 +47,8 @@ import { images } from "./image-widget";
 import { theme } from "./theme";
 import "./style.css";
 
-let vimModeCompartment = new Compartment();
+const vimModeCompartment = new Compartment();
+
 const extensions = [
   // lineNumbers(),
   highlightActiveLineGutter(),
@@ -314,38 +315,44 @@ export default function (props: FileBlockProps) {
           />
         </div>
       )}
-      <button
-        className={tw`absolute top-3 right-3 z-50 appearance-none`}
-        style={{
-          opacity: isUsingVim ? 1 : 0.5,
-          filter: isUsingVim ? "" : "grayscale(100%)",
-        }}
-        title={isUsingVim ? "Disable Vim Mode" : "Enable Vim Mode"}
-        onClick={() => {
-          const newIsUsingVim = !isUsingVim;
-          setIsUsingVim(newIsUsingVim);
-          if (!viewRef.current) return;
-          viewRef.current.dispatch({
-            effects: vimModeCompartment.reconfigure(newIsUsingVim ? vim() : []),
-          });
-          viewRef.current.focus();
-        }}
-      >
-        {/* the vim logo */}
-        <svg width="2em" viewBox="0 0 544.8642 544.8642">
-          <g transform="translate(-69.980994,-160.33288) matrix(1.532388,0,0,1.3939671,-54.912136,-41.792396)">
-            <path
-              d="M 260.50744,170.69515 105.98412,340.79094 259.8636,510.178 414.38691,340.08221 260.50744,170.69515 z"
-              fill="#019833"
-            ></path>
-            <path
-              transform="matrix(0.90138601,0,0,0.99222542,-437.42287,-185.30615)"
-              d="m 828.9375,369.5 -4.28125,4.28125 0,15.71875 3.75,3.75 19.8125,0 0,15.1875 -131.0625,132.84375 0,-147.84375 21.78125,0 4.46875,-4.46875 0,-15.90625 -4.125,-3.1875 -114.625,0 -3.75,3.75 0,16.25 3.8125,3.8125 19.9375,0 0,272.25 3.75,3.75 22.65625,0 274.65625,-283.40625 0,-12.5 -4.28125,-4.28125 -112.5,0 z"
-              fill="#cccccc"
-            ></path>
-          </g>
-        </svg>
-      </button>
+
+      {isEditable && (
+        <button
+          className={tw`absolute top-3 right-3 z-50 appearance-none`}
+          style={{
+            opacity: isUsingVim ? 1 : 0.5,
+            filter: isUsingVim ? "" : "grayscale(100%)",
+          }}
+          title={isUsingVim ? "Disable Vim Mode" : "Enable Vim Mode"}
+          onClick={() => {
+            const newIsUsingVim = !isUsingVim;
+            setIsUsingVim(newIsUsingVim);
+            if (!viewRef.current) return;
+            viewRef.current.dispatch({
+              effects: vimModeCompartment.reconfigure(
+                newIsUsingVim ? vim() : []
+              ),
+            });
+            viewRef.current.focus();
+          }}
+        >
+          {/* the vim logo */}
+          <svg width="2em" viewBox="0 0 544.8642 544.8642">
+            <g transform="translate(-69.980994,-160.33288) matrix(1.532388,0,0,1.3939671,-54.912136,-41.792396)">
+              <path
+                d="M 260.50744,170.69515 105.98412,340.79094 259.8636,510.178 414.38691,340.08221 260.50744,170.69515 z"
+                fill="#019833"
+              ></path>
+              <path
+                transform="matrix(0.90138601,0,0,0.99222542,-437.42287,-185.30615)"
+                d="m 828.9375,369.5 -4.28125,4.28125 0,15.71875 3.75,3.75 19.8125,0 0,15.1875 -131.0625,132.84375 0,-147.84375 21.78125,0 4.46875,-4.46875 0,-15.90625 -4.125,-3.1875 -114.625,0 -3.75,3.75 0,16.25 3.8125,3.8125 19.9375,0 0,272.25 3.75,3.75 22.65625,0 274.65625,-283.40625 0,-12.5 -4.28125,-4.28125 -112.5,0 z"
+                fill="#cccccc"
+              ></path>
+            </g>
+          </svg>
+        </button>
+      )}
+
       <div
         className={tw(`relative w-full h-[30em]`)}
         key={context.path}

diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
     "@primer/react": "^35.2.0",
     "@react-three/drei": "^7.20.5",
     "@react-three/fiber": "^7.0.19",
+    "@replit/codemirror-indentation-markers": "^6.0.0",
     "@replit/codemirror-interact": "^6.0.1",
     "@replit/codemirror-vim": "^6.0.2",
     "@tensorflow-models/universal-sentence-encoder": "^1.3.3",

diff --git a/yarn.lock b/yarn.lock
@@ -1744,6 +1744,11 @@
     utility-types "^3.10.0"
     zustand "^3.5.1"
 
+"@replit/codemirror-indentation-markers@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@replit/codemirror-indentation-markers/-/codemirror-indentation-markers-6.0.0.tgz#6504ac1ccb59db8eedd310c2812920e2e904b76e"
+  integrity sha512-8mUORAWA++5e8xSBfDWWbitvIyM2Ox4rjiJEw9ldqIbiKce+U3+kHVaYQMjPVFz9SsR3J1blwoWgbTuNA1aKtw==
+
 "@replit/codemirror-interact@^6.0.1":
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/@replit/codemirror-interact/-/codemirror-interact-6.0.1.tgz#80b0538f91cb7902ef8f9226a6dc522115d09d7e"