Merge pull request #4876 from thematters/fix/editor-space

feat(editor): always insert a new line on click the padding bottom of editor container
thematters · Oct 5, 2024 · 87d97bc · 87d97bc
2 parents f45ca59 + 642c238
commit 87d97bc
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 6 deletions.
diff --git a/src/components/Editor/Article/index.tsx b/src/components/Editor/Article/index.tsx
@@ -10,6 +10,7 @@ import {
   useEditor,
 } from '@matters/matters-editor'
 import classNames from 'classnames'
+import { useCallback, useRef } from 'react'
 import { useIntl } from 'react-intl'
 import { useDebouncedCallback } from 'use-debounce'
 
@@ -136,6 +137,28 @@ export const ArticleEditor: React.FC<ArticleEditorProps> = ({
     ],
   })
 
+  const editorRef = useRef<HTMLDivElement>(null)
+  const handleEditorClick = useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      const $editor = editorRef.current
+
+      if (!$editor || !editor) return
+
+      const { clientHeight } = $editor
+      const paddingBottom = parseInt(
+        window.getComputedStyle($editor).paddingBottom,
+        10
+      )
+      const clickY = event.nativeEvent.offsetY
+
+      if (clickY > clientHeight - paddingBottom && clickY <= clientHeight) {
+        editor.commands.focus('end')
+        editor.commands.insertContent([{ type: 'paragraph' }])
+      }
+    },
+    [editor]
+  )
+
   // fallback drop handler for non-editor area
   useNativeEventListener<DragEvent>('drop', async (event) => {
     const target = event.target
@@ -166,7 +189,9 @@ export const ArticleEditor: React.FC<ArticleEditorProps> = ({
   return (
     <div
       className={editorClasses}
-      id="editor" // anchor for mention plugin
+      id="editor"
+      ref={editorRef}
+      onClick={handleEditorClick}
     >
       <EditorTitle defaultValue={title || ''} update={update} />
 

diff --git a/src/components/Editor/Article/styles.module.css b/src/components/Editor/Article/styles.module.css
@@ -6,21 +6,21 @@
 
   height: calc(var(--ivh) * 100 - 3rem - 4rem - var(--sp16) * 2);
   height: calc(100dvh - 3rem - 4rem - var(--sp16) * 2);
-  overflow-x: hidden;
-  overflow-y: auto;
+  padding-bottom: 30vh;
+  overflow: hidden auto;
+  cursor: text;
 
   @media (--md-up) {
     height: auto;
-    padding-bottom: 0;
     overflow-x: initial;
     overflow-y: initial;
   }
 
   & :global(.ProseMirror),
   & :global(.tiptap) {
-    min-height: 50vh;
+    /* min-height: 50vh;
     min-height: calc(var(--ivh) * 50);
-    min-height: 50dvh;
+    min-height: 50dvh; */
 
     /* outline */
     &:focus {