diff --git a/static/app-strings.json b/static/app-strings.json index ec911b610..0efaffa22 100644 --- a/static/app-strings.json +++ b/static/app-strings.json @@ -1315,7 +1315,14 @@ "Change to tile layout": "Change to tile layout", "Create a channel": "Create a channel", "Credit Details": "Credit Details", +<<<<<<< HEAD "LBRY Credits": "LBRY Credits", "Sync my YouTube channel": "Sync my YouTube channel", +======= + "Sign In": "Sign In", + "Change to tile layout": "Change to tile layout", + "%total_comments% comments": "%total_comments% comments", + "Show more": "Show more", +>>>>>>> shift enter to comment "--end--": "--end--" } diff --git a/ui/component/commentCreate/view.jsx b/ui/component/commentCreate/view.jsx index da5af7864..75485e3a0 100644 --- a/ui/component/commentCreate/view.jsx +++ b/ui/component/commentCreate/view.jsx @@ -10,6 +10,7 @@ import ChannelSelection from 'component/selectChannel'; import usePersistedState from 'effects/use-persisted-state'; import { FF_MAX_CHARS_IN_COMMENT } from 'constants/form-field'; import { useHistory } from 'react-router'; +import type { ElementRef } from 'react'; type Props = { uri: string, @@ -24,6 +25,7 @@ type Props = { export function CommentCreate(props: Props) { const { createComment, claim, channels, topLevelId, onDoneReplying, onCancelReplying, isNested } = props; + const buttonref: ElementRef = React.useRef(); const { push } = useHistory(); const { claim_id: claimId } = claim; const isReply = !!topLevelId; @@ -32,6 +34,7 @@ export function CommentCreate(props: Props) { const [charCount, setCharCount] = useState(commentValue.length); const [advancedEditor, setAdvancedEditor] = usePersistedState('comment-editor-mode', false); const hasChannels = channels && channels.length; + const disabled = channel === CHANNEL_NEW || !commentValue.length; const topChannel = channels && @@ -59,6 +62,28 @@ export function CommentCreate(props: Props) { setCommentValue(commentValue); } + function handleCommentAck() { + setCommentAck(true); + } + + function altEnterListener(e: SyntheticKeyboardEvent<*>) { + if (e.shiftKey && e.keyCode === 13) { + e.preventDefault(); + buttonref.current.click(); + } + } + + function onTextareaFocus() { + window.addEventListener('keydown', altEnterListener); + if (!commentAck) { + openModal(MODALS.COMMENT_ACKNOWEDGEMENT, { onCommentAcknowledge: handleCommentAck }); + } + } + + function onTextareaBlur() { + window.removeEventListener('keydown', altEnterListener); + } + function handleSubmit() { if (channel !== CHANNEL_NEW && commentValue.length) { createComment(commentValue, claimId, channel, topLevelId).then(res => { @@ -108,6 +133,8 @@ export function CommentCreate(props: Props) { !SIMPLE_SITE && (isReply ? undefined : advancedEditor ? __('Simple Editor') : __('Advanced Editor')) } quickActionHandler={!SIMPLE_SITE && toggleEditorMode} + onFocus={onTextareaFocus} + onBlur={onTextareaBlur} placeholder={__('Say something about this...')} value={commentValue} charCount={charCount} @@ -117,8 +144,9 @@ export function CommentCreate(props: Props) { />