LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Comments: add ability to toggle between simple and markdown editor.

Browse source
This commit is contained in:
infiinte-persistence 2020-05-21 16:53:21 +08:00 committed by Sean Yesmunt
parent fffd2f1576
commit 5b11cd7c65
2 changed files with 20 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
ui/component/comment/view.jsx
View file

@ -12,6 +12,7 @@ import * as ICONS from 'constants/icons';
import { FormField, Form } from 'component/common/form'; import { FormField, Form } from 'component/common/form';
import CommentCreate from 'component/commentCreate'; import CommentCreate from 'component/commentCreate';
import classnames from 'classnames'; import classnames from 'classnames';
import usePersistedState from 'effects/use-persisted-state';
type Props = { type Props = {
uri: string, uri: string,
@ -64,6 +65,8 @@ function Comment(props: Props) {
// used for controlling visibility of reply comment component // used for controlling visibility of reply comment component
const [isReplying, setReplying] = useState(false); const [isReplying, setReplying] = useState(false);
const [advancedEditor, setAdvancedEditor] = usePersistedState('comment-editor-mode', false);
// to debounce subsequent requests // to debounce subsequent requests
const shouldFetch = const shouldFetch =
channel === undefined || channel === undefined ||
@ -99,7 +102,7 @@ function Comment(props: Props) {
} }
function handleEditMessageChanged(event) { function handleEditMessageChanged(event) {
setCommentValue(event.target.value); setCommentValue(advancedEditor ? event : event.target.value);
} }
function handleSubmit() { function handleSubmit() {
@ -124,6 +127,10 @@ function Comment(props: Props) {
setMouseHover(false); setMouseHover(false);
} }
function toggleEditorMode() {
setAdvancedEditor(!advancedEditor);
}
return ( return (
<li <li
className={classnames('comment', { comment__reply: parentId !== null })} className={classnames('comment', { comment__reply: parentId !== null })}
@ -182,11 +189,13 @@ function Comment(props: Props) {
{isEditing ? ( {isEditing ? (
<Form onSubmit={handleSubmit}> <Form onSubmit={handleSubmit}>
<FormField <FormField
type="textarea" type={advancedEditor ? 'markdown' : 'textarea'}
name="editing_comment" name="editing_comment"
value={editedMessage} value={editedMessage}
charCount={charCount} charCount={charCount}
onChange={handleEditMessageChanged} onChange={handleEditMessageChanged}
quickActionLabel={advancedEditor ? __('Simple Editor') : __('Advanced Editor')}
quickActionHandler={toggleEditorMode}
/> />
<div className="section__actions"> <div className="section__actions">
<Button <Button

11
ui/component/commentCreate/view.jsx
View file

@ -38,6 +38,7 @@ export function CommentCreate(props: Props) {
const [commentAck, setCommentAck] = usePersistedState('comment-acknowledge', false); const [commentAck, setCommentAck] = usePersistedState('comment-acknowledge', false);
const [channel, setChannel] = usePersistedState('comment-channel', ''); const [channel, setChannel] = usePersistedState('comment-channel', '');
const [charCount, setCharCount] = useState(commentValue.length); const [charCount, setCharCount] = useState(commentValue.length);
const [advancedEditor, setAdvancedEditor] = usePersistedState('comment-editor-mode', false);
const topChannel = const topChannel =
channels && channels &&
@ -55,7 +56,7 @@ export function CommentCreate(props: Props) {
}, [channel, topChannel]); }, [channel, topChannel]);
function handleCommentChange(event) { function handleCommentChange(event) {
setCommentValue(event.target.value); setCommentValue(advancedEditor ? event : event.target.value);
} }
function handleChannelChange(channel) { function handleChannelChange(channel) {
@ -82,6 +83,10 @@ export function CommentCreate(props: Props) {
} }
} }
function toggleEditorMode() {
setAdvancedEditor(!advancedEditor);
}
useEffect(() => setCharCount(commentValue.length), [commentValue]); useEffect(() => setCharCount(commentValue.length), [commentValue]);
if (!commentingEnabled) { if (!commentingEnabled) {
@ -97,9 +102,11 @@ export function CommentCreate(props: Props) {
{!isReply && <ChannelSelection channel={channel} hideAnon onChannelChange={handleChannelChange} />} {!isReply && <ChannelSelection channel={channel} hideAnon onChannelChange={handleChannelChange} />}
<FormField <FormField
disabled={channel === CHANNEL_NEW} disabled={channel === CHANNEL_NEW}
type="textarea" type={advancedEditor ? 'markdown' : 'textarea'}
name="content_description" name="content_description"
label={isReply ? __('Replying as %reply_channel%', { reply_channel: channel }) : __('Comment')} label={isReply ? __('Replying as %reply_channel%', { reply_channel: channel }) : __('Comment')}
quickActionLabel={advancedEditor ? __('Simple Editor') : __('Advanced Editor')}
quickActionHandler={toggleEditorMode}
onFocus={onTextareaFocus} onFocus={onTextareaFocus}
placeholder={__('Say something about this...')} placeholder={__('Say something about this...')}
value={commentValue} value={commentValue}