From 9081144701230acdc9d3a72cdc50ce138a1225cd Mon Sep 17 00:00:00 2001 From: Chen-I Lim Date: Tue, 27 Oct 2020 16:59:40 -0700 Subject: [PATCH] Markdown comments --- webapp/src/components/cardDetail.tsx | 2 +- webapp/src/components/comment.scss | 4 +++ webapp/src/components/comment.tsx | 7 ++++- webapp/src/components/commentsList.tsx | 25 +++++++++------- webapp/src/components/contentBlock.tsx | 2 +- webapp/src/components/markdownEditor.tsx | 38 ++++++++++++++---------- 6 files changed, 48 insertions(+), 30 deletions(-) diff --git a/webapp/src/components/cardDetail.tsx b/webapp/src/components/cardDetail.tsx index 5022cc60e..e8116ba6c 100644 --- a/webapp/src/components/cardDetail.tsx +++ b/webapp/src/components/cardDetail.tsx @@ -102,7 +102,7 @@ class CardDetail extends React.Component { { + onBlur={(text) => { const block = new MutableTextBlock() block.parentId = card.id block.title = text diff --git a/webapp/src/components/comment.scss b/webapp/src/components/comment.scss index e46a5f384..13bbf9aa7 100644 --- a/webapp/src/components/comment.scss +++ b/webapp/src/components/comment.scss @@ -44,4 +44,8 @@ width: 100%; padding-left: 25px; } + + .comment-text * { + user-select: text; + } } diff --git a/webapp/src/components/comment.tsx b/webapp/src/components/comment.tsx index 649eda969..6a27ff10a 100644 --- a/webapp/src/components/comment.tsx +++ b/webapp/src/components/comment.tsx @@ -10,6 +10,7 @@ import Menu from '../widgets/menu' import MenuWrapper from '../widgets/menuWrapper' import './comment.scss' +import { Utils } from '../utils' type Props = { comment: IBlock @@ -20,6 +21,7 @@ type Props = { const Comment: FC = (props: Props) => { const {comment, username, userImageUrl, intl} = props + const html = Utils.htmlFromMarkdown(comment.title) return (
= (props: Props) => {
-
{comment.title}
+
) } diff --git a/webapp/src/components/commentsList.tsx b/webapp/src/components/commentsList.tsx index 7749ae4cb..f13a71cf1 100644 --- a/webapp/src/components/commentsList.tsx +++ b/webapp/src/components/commentsList.tsx @@ -8,11 +8,10 @@ import {IBlock} from '../blocks/block' import {Utils} from '../utils' import mutator from '../mutator' -import Editable from '../widgets/editable' - import Comment from './comment' import './commentsList.scss' +import { MarkdownEditor } from './markdownEditor' type Props = { comments: readonly IBlock[] @@ -73,13 +72,14 @@ class CommentsList extends React.Component { className='comment-avatar' src={userImageUrl} /> - this.setState({newComment: value})} - value={this.state.newComment} - onSave={() => { - this.sendComment() + onChange={(value: string) => { + if (this.state.newComment != value) { + this.setState({newComment: value}) + } }} /> @@ -87,16 +87,19 @@ class CommentsList extends React.Component {
{ - Utils.log(`Send comment: ${this.state.newComment}`) - this.sendComment() - this.setState({inputFocused: false, newComment: ''}) + if (this.state.newComment) { + Utils.log(`Send comment: ${this.state.newComment}`) + this.sendComment() + this.setState({inputFocused: false, newComment: ''}) + } }} > -
} + + } ) diff --git a/webapp/src/components/contentBlock.tsx b/webapp/src/components/contentBlock.tsx index 026b4d2a6..ffa2e74e0 100644 --- a/webapp/src/components/contentBlock.tsx +++ b/webapp/src/components/contentBlock.tsx @@ -102,7 +102,7 @@ class ContentBlock extends React.Component { { + onBlur={(text) => { Utils.log(`change text ${block.id}, ${text}`) mutator.changeTitle(block, text, 'edit card text') }} diff --git a/webapp/src/components/markdownEditor.tsx b/webapp/src/components/markdownEditor.tsx index 836674db3..bc729347a 100644 --- a/webapp/src/components/markdownEditor.tsx +++ b/webapp/src/components/markdownEditor.tsx @@ -9,13 +9,14 @@ import './markdownEditor.scss' import {Utils} from '../utils' type Props = { - onChanged: (text: string) => void text?: string placeholderText?: string uniqueId?: string + className?: string + onChange?: (text: string) => void onFocus?: () => void - onBlur?: () => void + onBlur?: (text: string) => void } type State = { @@ -44,8 +45,11 @@ class MarkdownEditor extends React.Component { this.state = {isEditing: false} } - componentDidUpdate(prevPros: Props, prevState: State) { - this.text = this.props.text || '' + componentDidUpdate(prevProps: Props, prevState: State) { + const newText = this.props.text || '' + if (!this.state.isEditing && this.text !== newText) { + this.text = newText + } } showEditor() { @@ -68,8 +72,7 @@ class MarkdownEditor extends React.Component { } render() { - const {text, placeholderText, uniqueId, onFocus, onBlur, onChanged} = this.props - const {isEditing} = this.state + const {text, placeholderText, uniqueId, onFocus, onBlur, onChange} = this.props let html: string if (text) { @@ -82,10 +85,10 @@ class MarkdownEditor extends React.Component { (
{ - if (!isEditing) { + if (!this.state.isEditing) { this.showEditor() } }} @@ -96,7 +99,7 @@ class MarkdownEditor extends React.Component { className='octo-editor-activeEditor' // Use visibility instead of display here so the editor is pre-rendered, avoiding a flash on showEditor - style={isEditing ? {} : {visibility: 'hidden', position: 'absolute', top: 0, left: 0}} + style={this.state.isEditing ? {} : {visibility: 'hidden', position: 'absolute', top: 0, left: 0}} onKeyDown={(e) => { // HACKHACK: Need to handle here instad of in CodeMirror because that breaks auto-lists if (e.keyCode === 27 && !e.shiftKey && !(e.ctrlKey || e.metaKey) && !e.altKey) { // Esc @@ -119,17 +122,20 @@ class MarkdownEditor extends React.Component { }} value={text} - // onChange={() => { - // // We register a change onBlur, consider implementing "auto-save" later - // }} events={{ + change: () => { + if (this.state.isEditing) { + const newText = this.elementRef.current.state.value + onChange?.(newText) + } + }, blur: () => { const newText = this.elementRef.current.state.value const oldText = this.props.text || '' - if (newText !== oldText && onChanged) { + if (newText !== oldText && onChange) { const newHtml = newText ? Utils.htmlFromMarkdown(newText) : Utils.htmlFromMarkdown(placeholderText || '') this.previewRef.current.innerHTML = newHtml - onChanged(newText) + onChange(newText) } this.text = newText @@ -137,7 +143,7 @@ class MarkdownEditor extends React.Component { this.frameRef.current.classList.remove('active') if (onBlur) { - onBlur() + onBlur(newText) } this.hideEditor() @@ -173,7 +179,7 @@ class MarkdownEditor extends React.Component { const element = (
{previewElement} {editorElement}