TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-27 12:53:13 +03:00
Code Issues Projects Releases Wiki Activity

Fixed autofocus cursor position when editing comments

Browse Source
This commit is contained in:
Simon Backx 2022-07-12 16:18:26 +02:00
parent e002904ce7
commit 072574ee71
1 changed files with 28 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
apps/comments-ui/src/components/Form.js
View File

@ -1,4 +1,4 @@
import React, {useContext} from 'react';
import React, {useContext, useEffect} from 'react';
import {Transition} from '@headlessui/react';
import AppContext from '../AppContext';
import Avatar from './Avatar';
@ -17,7 +17,9 @@ const Form = (props) => {
} else if (props.isEdit) {
config = {
placeholder: 'Edit this comment',
autofocus: true,
// warning: we cannot use autofocus on the edit field, because that sets
// the cursor position at the beginning of the text field instead of the end
autofocus: false,
content: props.comment.html
};
} else {
@ -31,6 +33,30 @@ const Form = (props) => {
...getEditorConfig(config)
});
// Set the cursor position at the end of the form, instead of the beginning (= when using autofocus)
useEffect(() => {
if (!editor) {
return;
}
// Focus editor + jump to end
if (!props.isEdit) {
return;
}
// jump to end
editor
.chain()
.focus()
.command(({tr, commands}) => {
return commands.setTextSelection({
from: tr.doc.content.size,
to: tr.doc.content.size
});
})
.run();
}, [editor, props.isEdit]);
const focused = editor?.isFocused || !editor?.isEmpty;
const submitForm = async (event) => {