Display cursor position

tact-lang · May 2, 2024 · 62af9f2 · 62af9f2
1 parent 26f4efd
commit 62af9f2
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 1 deletion.
diff --git a/src/components/workspace/Editor/Editor.module.scss b/src/components/workspace/Editor/Editor.module.scss
@@ -1,6 +1,20 @@
 .container {
   // height: calc(100vh - 15rem);
   height: 100%;
+  position: relative;
+  .editorInfo {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    z-index: 1;
+    display: flex;
+    gap: 1rem;
+    justify-content: flex-end;
+    font-size: 0.8rem;
+    padding: 0.2rem 1rem;
+  }
 
   .editor {
     height: 100%;

diff --git a/src/components/workspace/Editor/Editor.tsx b/src/components/workspace/Editor/Editor.tsx
@@ -34,6 +34,9 @@ const Editor: FC<Props> = ({ file, projectId, className = '' }) => {
 
   const [isLoaded, setIsLoaded] = useState(false);
   const [isEditorInitialized, setIsEditorInitialized] = useState(false);
+  const [cursorPosition, setCursorPosition] = useState<[number, number]>([
+    0, 0,
+  ]);
 
   // Using this extra state to trigger save file from js event
   const [saveFileCounter, setSaveFileCounter] = useState(1);
@@ -177,6 +180,11 @@ const Editor: FC<Props> = ({ file, projectId, className = '' }) => {
 
   return (
     <div className={`${s.container} ${className}`}>
+      <div className={s.editorInfo}>
+        <span>
+          Line {cursorPosition[0]}, Column {cursorPosition[1]}
+        </span>
+      </div>
       <EditorDefault
         className={s.editor}
         path={file.id ? `${projectId}/${file.id}}` : ''}
@@ -202,6 +210,12 @@ const Editor: FC<Props> = ({ file, projectId, className = '' }) => {
 
           setIsEditorInitialized(true);
           editorOnMount(editor, monaco);
+          editor.onDidChangeCursorPosition((e) => {
+            const position = editor.getPosition();
+            if (position) {
+              setCursorPosition([position.lineNumber, position.column]);
+            }
+          });
           const { startLSP } = await import('./lsp');
           startLSP(editor, monaco, lspWebSocket);
         }}

diff --git a/src/components/workspace/WorkSpace/WorkSpace.tsx b/src/components/workspace/WorkSpace/WorkSpace.tsx
@@ -216,7 +216,7 @@ const WorkSpace: FC = () => {
                     <Tabs projectId={projectId as string} />
                   </div>
 
-                  <div style={{ height: '100%' }}>
+                  <div style={{ height: 'calc(100% - 43px)' }}>
                     {isLoaded && !projectId && !activeFile && (
                       <ProjectTemplate />
                     )}