From 642c23851be358f89ec633748851742f4507aafb Mon Sep 17 00:00:00 2001
From: robertu7 <4065233+robertu7@users.noreply.github.com>
Date: Mon, 16 Sep 2024 16:57:50 +0800
Subject: [PATCH] feat(editor): always insert a new line on click the padding
 bottom of editor container

---
 src/components/Editor/Article/index.tsx       | 27 ++++++++++++++++++-
 .../Editor/Article/styles.module.css          | 10 +++----
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/components/Editor/Article/index.tsx b/src/components/Editor/Article/index.tsx
index 71b000bd0f..ac28939ea1 100644
--- 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
index d0cd5b7bb6..591e66503a 100644
--- 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 {