Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00
Code Issues Activity

Added editor to EditForm

Browse source
This commit is contained in:
Simon Backx 2022-07-08 10:24:52 +02:00
parent 1a894e3120
commit 10626d9bf7
2 changed files with 18 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
apps/comments-ui/src/components/EditForm.js
View file

@ -1,16 +1,20 @@
import React, {useContext, useState} from 'react';
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 [message, setMessage] = useState(props.comment.html);
const {dispatchAction} = useContext(AppContext);
const getHTML = () => {
// Convert newlines to <br> for now (until we add a real editor)
return message.replace('\n', '<br>');
};
const editor = useEditor({
...getEditorConfig({
placeholder: 'Edit comment',
autofocus: true,
content: props.comment.html
})
});
const submitForm = async (event) => {
event.preventDefault();
@ -18,7 +22,7 @@ const EditForm = (props) => {
await dispatchAction('editComment', {
comment: {
id: props.comment.id,
html: getHTML()
html: editor.getHTML()
},
parent: props.parent
});
@ -28,14 +32,10 @@ const EditForm = (props) => {
return false;
};
const handleChange = (event) => {
setMessage(event.target.value);
};
const comment = props.comment;
return (
<form onSubmit={submitForm} 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`}>
<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} />
@ -45,23 +45,16 @@ const EditForm = (props) => {
</div>
<div className="pr-3 font-sans leading-normal dark:text-neutral-300">
<div className="relative w-full">
<textarea
<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`}
value={message}
onChange={handleChange}
onFocus={function (e) {
var val = e.target.value;
e.target.value = '';
e.target.value = val;
}}
autoFocus
placeholder='Join the discussion'
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="submit">
type="button"
onClick={submitForm}>
Edit comment
</button>
</div>

4
apps/comments-ui/src/utils/editor.js
View file

@ -4,7 +4,7 @@ import Link from '@tiptap/extension-link';
import Paragraph from '@tiptap/extension-paragraph';
import Document from '@tiptap/extension-document';
export function getEditorConfig({placeholder, autofocus = false}) {
export function getEditorConfig({placeholder, autofocus = false, content = ''}) {
return {
extensions: [
Document,
@ -22,7 +22,7 @@ export function getEditorConfig({placeholder, autofocus = false}) {
placeholder
})
],
content: '',
content,
autofocus,
editorProps: {
attributes: {