resolves #966 Editor should take 100vh (#975)

EcrituresNumeriques · Nov 20, 2023 · a79ce74 · a79ce74
1 parent 4805ebd
commit a79ce74
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 5 deletions.
diff --git a/front/src/components/Write/providers/monaco/TextEditor.module.scss b/front/src/components/Write/providers/monaco/TextEditor.module.scss
@@ -4,7 +4,7 @@
 .editor {
   border: 1px solid $main-border-color;
   min-height: 200px;
-  height: calc(100vh - 190px);
+  height: calc(100vh - 160px);
 
   :global {
     .monaco-editor {

diff --git a/front/src/components/Write/write.module.scss b/front/src/components/Write/write.module.scss
@@ -72,7 +72,7 @@
   display: flex;
   flex-direction: row;
   gap: 1em;
-  max-height: calc(100vh - 140px);
+  max-height: calc(100vh - 80px);
 }
 
 :global {

diff --git a/front/src/components/collaborative/CollaborativeTextEditor.jsx b/front/src/components/collaborative/CollaborativeTextEditor.jsx
@@ -2,7 +2,7 @@ import { Loading } from '@geist-ui/core'
 import PropTypes from 'prop-types'
 import Editor from '@monaco-editor/react'
 import throttle from 'lodash.throttle'
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { shallowEqual, useDispatch, useSelector } from 'react-redux'
 import { MonacoBinding } from 'y-monaco'
 import * as collaborating from './collaborating.js'
@@ -43,6 +43,8 @@ const colors = [
 
 export default function CollaborativeTextEditor ({ articleId, collaborativeSessionCreatorId, collaborativeSessionId, onCollaborativeSessionStateUpdated }) {
   const connectingRef = useRef(false)
+  const [viewportHeight, setViewportHeight] = useState(window.innerHeight)
+  const [editorVerticalOffset, setEditorVerticalOffset] = useState(0)
   const [dynamicStyles, setDynamicStyles] = useState('')
   const [websocketStatus, setWebsocketStatus] = useState('')
   const [yText, setYText] = useState(null)
@@ -145,8 +147,9 @@ export default function CollaborativeTextEditor ({ articleId, collaborativeSessi
 
   const handleEditorDidMount = useCallback((editor) => {
     editorRef.current = editor
+    setEditorVerticalOffset(editor._domElement.getBoundingClientRect().y + window.scrollY + 50)
     new MonacoBinding(yText, editor.getModel(), new Set([editor]), awareness)
-  }, [yText, awareness])
+  }, [yText, awareness, setEditorVerticalOffset])
 
   useEffect(() => {
     const line = editorCursorPosition.lineNumber
@@ -157,6 +160,23 @@ export default function CollaborativeTextEditor ({ articleId, collaborativeSessi
     editor?.revealLine(line + 1, 1) // smooth
   }, [editorRef, editorCursorPosition])
 
+  const updateViewportHeight = useCallback(() => {
+    setViewportHeight(window.innerHeight)
+    const editor = editorRef.current
+    if (editor) {
+      setEditorVerticalOffset(editor._domElement.getBoundingClientRect().y + window.scrollY + 50)
+    }
+  }, [setViewportHeight, editorRef, setEditorVerticalOffset])
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      window.addEventListener('resize', updateViewportHeight)
+    }
+    return () => {
+      window.removeEventListener('resize', updateViewportHeight)
+    }
+  }, [updateViewportHeight])
+
   if (!yText) {
     return <Loading/>
   }
@@ -171,6 +191,7 @@ export default function CollaborativeTextEditor ({ articleId, collaborativeSessi
     <Editor
       options={options}
       className={styles.editor}
+      height={viewportHeight - editorVerticalOffset + "px"}
       defaultLanguage="markdown"
       onMount={handleEditorDidMount}
     />

diff --git a/front/src/components/collaborative/CollaborativeTextEditor.module.scss b/front/src/components/collaborative/CollaborativeTextEditor.module.scss
@@ -4,7 +4,6 @@
 .editor {
   border: 1px solid $main-border-color;
   min-height: 200px;
-  height: calc(100vh - 340px);
 
   :global {
     .monaco-editor {