Merge pull request #9840 from weseek/imprv/comment-editor-hitarea

imprv: Adjust comment editor clickable area

apps/app/src/client/components/PageComment/CommentEditor.module.scss

@@ -23,6 +23,12 @@
 
 // adjust height
 .comment-editor-styles :global {
+  // Set `display: flex` instead of `display: block` to make it work with `flex: 1` of the children
+  // This helps users focus on the editor by clicking on the broader area
+  .tab-pane.active {
+    display: flex;
+  }
+
   .cm-editor {
     min-height: comment-inheritance.$codemirror-default-height !important;
     max-height: #{2 * comment-inheritance.$codemirror-default-height};
@@ -42,3 +48,10 @@
     border-radius: var(--bs-border-radius);
   }
 }
+
+// remove outline
+.comment-editor-styles :global {
+  .cm-editor {
+    outline: none;
+  }
+}

apps/app/src/client/components/PageComment/CommentEditor.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode, JSX } from 'react';
 import React, {
-  useCallback, useState, useEffect,
+  useCallback, useState, useEffect, useLayoutEffect,
   useMemo,
 } from 'react';
 
@@ -224,6 +224,11 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
     codeMirrorEditor?.initDoc(commentBody);
   }, [codeMirrorEditor, commentBody]);
 
+  // set handler to focus
+  useLayoutEffect(() => {
+    if (showPreview) return;
+    codeMirrorEditor?.focus();
+  }, [codeMirrorEditor, showPreview]);
 
   const errorMessage = useMemo(() => <span className="text-danger text-end me-2">{error}</span>, [error]);
   const cancelButton = useMemo(() => (

apps/app/src/client/components/PageEditor/_page-editor-inheritance.scss

@@ -1 +1 @@
-$navbar-editor-height: 32.8px;
+$navbar-editor-height: 37.8px;