Merge pull request #4391 from thematters/feat/mobile-article-editor

feat(editor): use --vvh for article editor content height on mobile
thematters · May 17, 2024 · 74f0ef0 · 74f0ef0
2 parents 5fd86a5 + 52ff6d1
commit 74f0ef0
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 13 deletions.
diff --git a/src/components/Editor/Article/FloatingMenu/styles.module.css b/src/components/Editor/Article/FloatingMenu/styles.module.css
@@ -1,6 +1,6 @@
 .container {
   position: absolute;
-  top: calc(2rem / 2 * -1);
+  top: calc(2rem / 2 * -1 - 1px); /* 2rem is icon size, 1px for offset */
   left: 0;
   display: flex;
   align-items: center;

diff --git a/src/components/Editor/Article/index.tsx b/src/components/Editor/Article/index.tsx
@@ -1,6 +1,5 @@
 import { useApolloClient } from '@apollo/react-hooks'
 import { EditorContent, useArticleEdtor } from '@matters/matters-editor'
-import classNames from 'classnames'
 import { useIntl } from 'react-intl'
 import { useDebouncedCallback } from 'use-debounce'
 
@@ -57,6 +56,13 @@ export const ArticleEditor: React.FC<ArticleEditorProps> = ({
       const content = editor.getHTML()
       debouncedUpdate({ content })
     },
+    // toggle body class
+    onFocus: () => {
+      document.body.classList.add('editor-focused')
+    },
+    onBlur: () => {
+      document.body.classList.remove('editor-focused')
+    },
     mentionSuggestion: makeMentionSuggestion({ client }),
     extensions: [
       FigureEmbedLinkInput,
@@ -74,9 +80,7 @@ export const ArticleEditor: React.FC<ArticleEditorProps> = ({
 
   return (
     <div
-      className={classNames({
-        [styles.articleEditor]: true,
-      })}
+      className={styles.articleEditor}
       id="editor" // anchor for mention plugin
     >
       <EditorTitle defaultValue={title || ''} update={update} />

diff --git a/src/components/Editor/Article/styles.module.css b/src/components/Editor/Article/styles.module.css
@@ -1,20 +1,22 @@
 .articleEditor {
   position: relative;
-  padding-bottom: 4rem; /* bottom bar height */
+  height: calc(
+    100vh - 3rem -4rem - var(--sp16) * 2
+  ); /* 3rem for header, 4rem for bottom bar */
+
+  height: calc(var(--vvh) * 100 - 3rem -4rem - var(--sp16) * 2);
+  overflow-x: hidden;
+  overflow-y: auto;
 
   @media (--lg-up) {
+    height: auto;
     padding-bottom: 0;
   }
 
   & :global(.ProseMirror),
   & :global(.tiptap) {
     min-height: 50vh;
     min-height: calc(var(--vvh) * 50);
-    margin-bottom: var(var(--global-nav-height));
-
-    @media (--lg-up) {
-      margin-bottom: 0;
-    }
 
     /* outline */
     &:focus {
@@ -94,3 +96,14 @@
     }
   }
 }
+
+:global(body.editor-focused) {
+  & .articleEditor {
+    height: calc(100vh - 3rem - var(--sp16) * 2); /* 3rem for header */
+    height: calc(var(--vvh) * 100 - 3rem - var(--sp16) * 2);
+
+    @media (--lg-up) {
+      height: auto;
+    }
+  }
+}
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
@@ -84,7 +84,7 @@ const Main: React.FC<React.PropsWithChildren<MainProps>> & {
     [styles.hasNavBar]: !isInArticleDetail && !isInDraftDetail,
   })
 
-  const enbableSticky = !isInArticleDetailHistory && !isInEditor
+  const enbableSticky = !isInArticleDetailHistory
 
   usePullToRefresh.Register('#ptr')
   usePullToRefresh.Handler(() => window.location.reload())

diff --git a/src/components/Layout/styles.module.css b/src/components/Layout/styles.module.css
@@ -54,10 +54,15 @@
 .article {
   position: relative;
   grid-column: content;
-  min-height: calc(100vh + 1px);
+  min-height: 100vh;
+  min-height: calc(var(--vvh) * 100);
 
   @media (--sm-up) {
     grid-column: content;
+
+    /* FIXME: page scrollbar is showed on open dialog */
+    min-height: calc(100vh + 1px);
+    min-height: calc(var(--vvh) * 100 + 1px);
     padding-bottom: 0;
   }