mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-24 23:48:13 -05:00
Refactored edit form down into base form, still needs fixes
This commit is contained in:
James Morris
parent
d55ffafb43
commit
9f11eaf547
3 changed files with 57 additions and 89 deletions
|
|
@ -4,9 +4,8 @@ import Avatar from './Avatar';
|
|||
import Like from './Like';
|
||||
import Reply from './Reply';
|
||||
import More from './More';
|
||||
import EditForm from './EditForm';
|
||||
import Replies from './Replies';
|
||||
import Form from './Form';
|
||||
import Replies from './Replies';
|
||||
import AppContext from '../AppContext';
|
||||
import {formatRelativeTime} from '../utils/helpers';
|
||||
|
||||
|
|
@ -38,7 +37,7 @@ const Comment = (props) => {
|
|||
|
||||
if (isInEditMode) {
|
||||
return (
|
||||
<EditForm comment={comment} toggle={toggleEditMode} parent={props.parent} />
|
||||
<Form comment={comment} toggle={toggleEditMode} parent={props.parent} isEdit={true} />
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,68 +0,0 @@
|
|||
import React, {useContext} from 'react';
|
||||
import Avatar from './Avatar';
|
||||
import AppContext from '../AppContext';
|
||||
import {useEditor, EditorContent} from '@tiptap/react';
|
||||
import {getEditorConfig} from '../utils/editor';
|
||||
|
||||
const EditForm = (props) => {
|
||||
// todo: we need to convert the HTML back to an editable state instead of putting it into the textarea
|
||||
const {dispatchAction} = useContext(AppContext);
|
||||
|
||||
const editor = useEditor({
|
||||
...getEditorConfig({
|
||||
placeholder: 'Edit comment',
|
||||
autofocus: true,
|
||||
content: props.comment.html
|
||||
})
|
||||
});
|
||||
|
||||
const submitForm = async (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
await dispatchAction('editComment', {
|
||||
comment: {
|
||||
id: props.comment.id,
|
||||
html: editor.getHTML()
|
||||
},
|
||||
parent: props.parent
|
||||
});
|
||||
|
||||
props.toggle();
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
const comment = props.comment;
|
||||
|
||||
return (
|
||||
<form className={`comment-form transition duration-200 bg-white dark:bg-[rgba(255,255,255,0.08)] rounded-md px-3 pt-3 pb-2 -ml-[13px] -mr-3 -mt-[13px] mb-10 shadow-lg dark:shadow-transparent hover:shadow-xl`}>
|
||||
<div>
|
||||
<div className="flex justify-start items-center">
|
||||
<Avatar saturation={props.avatarSaturation} />
|
||||
<div className="ml-3">
|
||||
<h4 className="text-lg font-sans font-semibold mb-1 tracking-tight dark:text-neutral-300">{comment.member.name ? comment.member.name : 'Anonymous'}</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pr-3 font-sans leading-normal dark:text-neutral-300">
|
||||
<div className="relative w-full">
|
||||
<EditorContent
|
||||
className={`w-full h-40 pl-[56px] border-none resize-none p-0 font-sans text-[16.5px] mb-1 leading-normal placeholder:text-neutral-300 focus:outline-0 bg-transparent dark:placeholder:text-[rgba(255,255,255,0.3)] dark:border-none dark:text-[rgba(255,255,255,0.9)] dark:shadow-transparent`}
|
||||
editor={editor}
|
||||
/>
|
||||
<div className="flex space-x-4 transition-[opacity] duration-150 absolute -right-3 bottom-2">
|
||||
<button type="button" className="font-sans text-sm font-medium ml-2.5 text-neutral-500 dark:text-neutral-400" onClick={props.toggle}>Cancel</button>
|
||||
<button
|
||||
className={`rounded-md border py-3 px-4 font-sans text-sm text-center bg-black font-semibold text-white dark:bg-[rgba(255,255,255,0.9)] dark:text-neutral-800`}
|
||||
type="button"
|
||||
onClick={submitForm}>
|
||||
Edit comment
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditForm;
|
||||
|
|
@ -8,18 +8,27 @@ import {getEditorConfig} from '../utils/editor';
|
|||
const Form = (props) => {
|
||||
const {member, postId, dispatchAction, onAction} = useContext(AppContext);
|
||||
|
||||
const editorAddConfig = {
|
||||
placeholder: 'Join the discussion',
|
||||
autofocus: false
|
||||
};
|
||||
|
||||
const editorReplyConfig = {
|
||||
let config;
|
||||
if (props.isReply) {
|
||||
config = {
|
||||
placeholder: 'Reply to comment',
|
||||
autofocus: false
|
||||
};
|
||||
} else if (props.isEdit) {
|
||||
config = {
|
||||
placeholder: 'Edit this comment',
|
||||
autofocus: true,
|
||||
content: props.comment.html
|
||||
};
|
||||
} else {
|
||||
config = {
|
||||
placeholder: 'Join the discussion',
|
||||
autofocus: false
|
||||
};
|
||||
}
|
||||
|
||||
const editor = useEditor({
|
||||
...getEditorConfig(props.isReply ? editorReplyConfig : editorAddConfig)
|
||||
...getEditorConfig(config)
|
||||
});
|
||||
|
||||
const focused = editor?.isFocused || !editor?.isEmpty;
|
||||
|
|
@ -50,6 +59,17 @@ const Form = (props) => {
|
|||
// eslint-disable-next-line no-console
|
||||
console.error(e);
|
||||
}
|
||||
} else if (props.isEdit) {
|
||||
// Send comment to server
|
||||
await dispatchAction('editComment', {
|
||||
comment: {
|
||||
id: props.comment.id,
|
||||
html: editor.getHTML()
|
||||
},
|
||||
parent: props.parent
|
||||
});
|
||||
|
||||
props.toggle();
|
||||
} else {
|
||||
try {
|
||||
// Send comment to server
|
||||
|
|
@ -66,12 +86,26 @@ const Form = (props) => {
|
|||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
const focusEditor = (event) => {
|
||||
editor.commands.focus();
|
||||
};
|
||||
|
||||
const comment = props.comment;
|
||||
const memberName = (props.isEdit ? comment.member.name : member.name);
|
||||
|
||||
let submitText;
|
||||
if (props.isReply) {
|
||||
submitText = 'Add reply';
|
||||
} else if (props.isEdit) {
|
||||
submitText = 'Edit comment';
|
||||
} else {
|
||||
submitText = 'Add comment';
|
||||
}
|
||||
|
||||
return (
|
||||
<form onClick={focusEditor} className={`bg-white comment-form transition duration-200 rounded-md px-3 pt-3 pb-2 ${props.commentsCount && '-ml-[13px] -mr-3'} mt-8 mb-10 shadow-lg dark:bg-[rgba(255,255,255,0.08)] dark:shadow-transparent hover:shadow-xl ${focused ? 'cursor-default' : 'cursor-pointer'}`}>
|
||||
<div className="w-full relative">
|
||||
|
|
@ -81,15 +115,18 @@ const Form = (props) => {
|
|||
className={`transition-[min-height] pl-[56px] px-0 py-[14px] ${focused ? 'pt-[48px] pb-[68px]' : 'mb-1'} duration-150 bg-transparent w-full placeholder:text-neutral-300 dark:placeholder:text-[rgba(255,255,255,0.3)] border-none resize-none rounded-md border border-slate-50 font-sans text-[16.5px] leading-normal focus:outline-0 dark:border-none dark:text-neutral-300 ${focused ? 'cursor-text min-h-[144px]' : 'cursor-pointer overflow-hidden min-h-[56px] hover:border-slate-300'}`}
|
||||
editor={editor}
|
||||
/>
|
||||
<div className="flex space-x-4 transition-[opacity] duration-150 absolute -right-3 bottom-2">
|
||||
{props.isEdit && <button type="button" className="font-sans text-sm font-medium ml-2.5 text-neutral-500 dark:text-neutral-400" onClick={props.toggle}>Cancel</button>}
|
||||
<button
|
||||
className={`transition-[opacity] duration-150 absolute -right-[9px] bottom-[4px] rounded-[4px] border py-3 px-4 font-sans text-sm text-center bg-neutral-900 font-semibold text-white dark:bg-[rgba(255,255,255,0.9)] dark:text-neutral-800`}
|
||||
className={`transition-[opacity] duration-150 rounded-[4px] border py-3 px-4 font-sans text-sm text-center bg-neutral-900 font-semibold text-white dark:bg-[rgba(255,255,255,0.9)] dark:text-neutral-800`}
|
||||
type="button"
|
||||
onClick={submitForm}
|
||||
>
|
||||
Add {props.isReply ? 'reply' : 'comment'}
|
||||
{submitText}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex mb-1 justify-start items-center absolute top-[4px] left-0">
|
||||
<Avatar saturation={props.avatarSaturation} />
|
||||
<Transition
|
||||
|
|
@ -102,7 +139,7 @@ const Form = (props) => {
|
|||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="ml-3">
|
||||
<h4 className="text-lg font-sans font-semibold mb-1 tracking-tight dark:text-neutral-300">{member.name ? member.name : 'Anonymous'}</h4>
|
||||
<h4 className="text-lg font-sans font-semibold mb-1 tracking-tight dark:text-neutral-300">{memberName ? memberName : 'Anonymous'}</h4>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue