refactor(comments): introduce focus to end of content as explicit fn

Make a explicit function to focus the editor at the end of the
edited comment content as focusEditor fn is now used internally
in the context provider.

Also simplify an effect that focuses the component this way.

packages/sanity/src/core/comments/components/pte/comment-input/CommentInputProvider.tsx

@@ -17,6 +17,7 @@ export interface CommentInputContextValue {
   expandOnFocus?: boolean
   focused: boolean
   focusEditor: () => void
+  focusEditorEndOfContent: () => void
   focusOnMount?: boolean
   hasChanges: boolean
   insertAtChar: () => void
@@ -72,6 +73,32 @@ export function CommentInputProvider(props: CommentInputProviderProps) {
 
   const focusEditor = useCallback(() => PortableTextEditor.focus(editor), [editor])
 
+  const focusEditorEndOfContent = useCallback(() => {
+    const _value = PortableTextEditor.getValue(editor)
+    const lastBlock = (_value || []).slice(-1)[0]
+    if (!lastBlock) {
+      PortableTextEditor.focus(editor)
+      return
+    }
+    const lastChild = isPortableTextTextBlock(lastBlock)
+      ? lastBlock.children.slice(-1)[0]
+      : undefined
+    if (!lastChild) {
+      PortableTextEditor.focus(editor)
+      return
+    }
+    const point = {
+      path: [{_key: lastBlock._key}, 'children', {_key: lastChild._key}],
+      offset: isPortableTextSpan(lastChild) ? lastChild.text.length : 0,
+    }
+    const newSelection = {
+      focus: point,
+      anchor: point,
+    }
+    PortableTextEditor.select(editor, newSelection)
+    PortableTextEditor.focus(editor)
+  }, [editor])
+
   const closeMentions = useCallback(() => {
     setMentionsMenuOpen(false)
     setMentionsSearchTerm('')
@@ -218,6 +245,7 @@ export function CommentInputProvider(props: CommentInputProviderProps) {
         expandOnFocus,
         focused,
         focusEditor,
+        focusEditorEndOfContent,
         focusOnMount,
         hasChanges,
         insertAtChar,
@@ -236,6 +264,7 @@ export function CommentInputProvider(props: CommentInputProviderProps) {
       expandOnFocus,
       focused,
       focusEditor,
+      focusEditorEndOfContent,
       focusOnMount,
       hasChanges,
       insertAtChar,

packages/sanity/src/core/comments/components/pte/comment-input/Editable.tsx

@@ -4,7 +4,6 @@ import {PortableTextEditable, usePortableTextEditorSelection} from '@sanity/port
 import styled, {css} from 'styled-components'
 import {isEqual} from 'lodash'
 import {MentionsMenu, MentionsMenuHandle} from '../../mentions'
-import {useDidUpdate} from '../../../../form'
 import {renderBlock, renderChild} from '../render'
 import {useCommentInput} from './useCommentInput'
 import {useCursorElement} from './useCursorElement'
@@ -58,6 +57,7 @@ export function Editable(props: EditableProps) {
   const {
     closeMentions,
     focusEditor,
+    focusEditorEndOfContent,
     focusOnMount,
     insertMention,
     mentionOptions,
@@ -77,11 +77,13 @@ export function Editable(props: EditableProps) {
     [popoverElement],
   )
 
-  useDidUpdate(focusOnMount, () => {
+  // This effect will focus the editor when the component mounts (if focusOnMount context value is true)
+  useEffect(() => {
     if (focusOnMount) {
-      focusEditor()
+      // Focus to the end of the content
+      focusEditorEndOfContent()
     }
-  })
+  }, [focusOnMount, focusEditorEndOfContent])
 
   // Update the mentions search term in the mentions menu
   useEffect(() => {