From 2fabd3cf549f53da890bb30557fcaa734d8de92a Mon Sep 17 00:00:00 2001 From: "Tom (plebeius.eth)" Date: Tue, 4 Jun 2024 10:30:01 +0200 Subject: [PATCH] feat(edit menu): add comment edit and delete for authors --- public/translations/ar/default.json | 3 +- public/translations/bn/default.json | 3 +- public/translations/cs/default.json | 3 +- public/translations/da/default.json | 3 +- public/translations/de/default.json | 3 +- public/translations/el/default.json | 3 +- public/translations/en/default.json | 3 +- public/translations/es/default.json | 3 +- public/translations/fa/default.json | 3 +- public/translations/fi/default.json | 3 +- public/translations/fil/default.json | 3 +- public/translations/fr/default.json | 3 +- public/translations/he/default.json | 3 +- public/translations/hi/default.json | 3 +- public/translations/hu/default.json | 3 +- public/translations/id/default.json | 3 +- public/translations/it/default.json | 3 +- public/translations/ja/default.json | 3 +- public/translations/ko/default.json | 3 +- public/translations/mr/default.json | 3 +- public/translations/nl/default.json | 3 +- public/translations/no/default.json | 3 +- public/translations/pl/default.json | 3 +- public/translations/pt/default.json | 3 +- public/translations/ro/default.json | 3 +- public/translations/ru/default.json | 3 +- public/translations/sq/default.json | 3 +- public/translations/sv/default.json | 3 +- public/translations/te/default.json | 3 +- public/translations/th/default.json | 3 +- public/translations/tr/default.json | 3 +- public/translations/uk/default.json | 3 +- public/translations/ur/default.json | 3 +- public/translations/vi/default.json | 3 +- public/translations/zh/default.json | 3 +- src/app.tsx | 26 +++--- .../post/edit-menu/edit-menu.module.css | 13 ++- src/components/post/edit-menu/edit-menu.tsx | 87 ++++++++++++++----- .../post/post-desktop/post-desktop.tsx | 2 +- 39 files changed, 162 insertions(+), 71 deletions(-) diff --git a/public/translations/ar/default.json b/public/translations/ar/default.json index d06f94f0..5468a70e 100644 --- a/public/translations/ar/default.json +++ b/public/translations/ar/default.json @@ -147,5 +147,6 @@ "optional": "اختياري", "close_thread": "اغلق الموضوع", "view_spoiler": "عرض الحاضر", - "filter": "تصفية" + "filter": "تصفية", + "edit": "تحرير" } \ No newline at end of file diff --git a/public/translations/bn/default.json b/public/translations/bn/default.json index 263dd18b..0e1bacf1 100644 --- a/public/translations/bn/default.json +++ b/public/translations/bn/default.json @@ -147,5 +147,6 @@ "optional": "ঐচ্ছিক", "close_thread": "থ্রেড বন্ধ করুন", "view_spoiler": "স্পোয়ালার দেখুন", - "filter": "ফিল্টার" + "filter": "ফিল্টার", + "edit": "সম্পাদনা" } \ No newline at end of file diff --git a/public/translations/cs/default.json b/public/translations/cs/default.json index 2715d135..d7513ff4 100644 --- a/public/translations/cs/default.json +++ b/public/translations/cs/default.json @@ -147,5 +147,6 @@ "optional": "volitelný", "close_thread": "uzavřít vlákno", "view_spoiler": "zobrazit spoiler", - "filter": "filtr" + "filter": "filtr", + "edit": "upravit" } \ No newline at end of file diff --git a/public/translations/da/default.json b/public/translations/da/default.json index 82179016..943201a0 100644 --- a/public/translations/da/default.json +++ b/public/translations/da/default.json @@ -147,5 +147,6 @@ "optional": "valgfri", "close_thread": "luk tråd", "view_spoiler": "vis spoiler", - "filter": "filtrér" + "filter": "filtrér", + "edit": "rediger" } \ No newline at end of file diff --git a/public/translations/de/default.json b/public/translations/de/default.json index 1a06f08d..6c071bc6 100644 --- a/public/translations/de/default.json +++ b/public/translations/de/default.json @@ -147,5 +147,6 @@ "optional": "optional", "close_thread": "Thread schließen", "view_spoiler": "Spoiler anzeigen", - "filter": "filtern" + "filter": "filtern", + "edit": "bearbeiten" } \ No newline at end of file diff --git a/public/translations/el/default.json b/public/translations/el/default.json index 6253bbe1..7a4d04af 100644 --- a/public/translations/el/default.json +++ b/public/translations/el/default.json @@ -147,5 +147,6 @@ "optional": "προαιρετικό", "close_thread": "κλείσιμο νήματος", "view_spoiler": "προβολή spoiler", - "filter": "φίλτρο" + "filter": "φίλτρο", + "edit": "επεξεργασία" } \ No newline at end of file diff --git a/public/translations/en/default.json b/public/translations/en/default.json index 2afb5e6f..4f44f528 100644 --- a/public/translations/en/default.json +++ b/public/translations/en/default.json @@ -147,5 +147,6 @@ "optional": "optional", "close_thread": "close thread", "view_spoiler": "view spoiler", - "filter": "filter" + "filter": "filter", + "edit": "edit" } \ No newline at end of file diff --git a/public/translations/es/default.json b/public/translations/es/default.json index 1b538e6e..02d0f10c 100644 --- a/public/translations/es/default.json +++ b/public/translations/es/default.json @@ -147,5 +147,6 @@ "optional": "opcional", "close_thread": "cerrar hilo", "view_spoiler": "ver spoiler", - "filter": "filtrar" + "filter": "filtrar", + "edit": "editar" } \ No newline at end of file diff --git a/public/translations/fa/default.json b/public/translations/fa/default.json index f8690e5c..15d8aac7 100644 --- a/public/translations/fa/default.json +++ b/public/translations/fa/default.json @@ -147,5 +147,6 @@ "optional": "اختیاری", "close_thread": "بستن موضوع", "view_spoiler": "نمایش اسپویلر", - "filter": "فیلتر" + "filter": "فیلتر", + "edit": "ویرایش" } \ No newline at end of file diff --git a/public/translations/fi/default.json b/public/translations/fi/default.json index 829f1233..efaf244a 100644 --- a/public/translations/fi/default.json +++ b/public/translations/fi/default.json @@ -147,5 +147,6 @@ "optional": "valinnainen", "close_thread": "sulje keskustelu", "view_spoiler": "näytä spoiler", - "filter": "suodatin" + "filter": "suodatin", + "edit": "muokkaa" } \ No newline at end of file diff --git a/public/translations/fil/default.json b/public/translations/fil/default.json index c467d2e8..4e100d83 100644 --- a/public/translations/fil/default.json +++ b/public/translations/fil/default.json @@ -147,5 +147,6 @@ "optional": "opsyonal", "close_thread": "isara ang thread", "view_spoiler": "tingnan ang spoiler", - "filter": "salain" + "filter": "salain", + "edit": "i-edit" } \ No newline at end of file diff --git a/public/translations/fr/default.json b/public/translations/fr/default.json index 2fff437d..181b41bd 100644 --- a/public/translations/fr/default.json +++ b/public/translations/fr/default.json @@ -147,5 +147,6 @@ "optional": "facultatif", "close_thread": "fermer le fil", "view_spoiler": "voir le spoiler", - "filter": "filtre" + "filter": "filtre", + "edit": "modifier" } \ No newline at end of file diff --git a/public/translations/he/default.json b/public/translations/he/default.json index cd2fba7f..53d94cc5 100644 --- a/public/translations/he/default.json +++ b/public/translations/he/default.json @@ -147,5 +147,6 @@ "optional": "אופציונלי", "close_thread": "סגור את הנושא", "view_spoiler": "הצג ספוילר", - "filter": "סנן" + "filter": "סנן", + "edit": "ערוך" } \ No newline at end of file diff --git a/public/translations/hi/default.json b/public/translations/hi/default.json index 1326e1f8..e7a8fd70 100644 --- a/public/translations/hi/default.json +++ b/public/translations/hi/default.json @@ -147,5 +147,6 @@ "optional": "वैकल्पिक", "close_thread": "थ्रेड बंद करें", "view_spoiler": "स्पॉइलर देखें", - "filter": "फ़िल्टर" + "filter": "फ़िल्टर", + "edit": "संपादित करें" } \ No newline at end of file diff --git a/public/translations/hu/default.json b/public/translations/hu/default.json index 4cd93844..d28f4bde 100644 --- a/public/translations/hu/default.json +++ b/public/translations/hu/default.json @@ -147,5 +147,6 @@ "optional": "opcionális", "close_thread": "szál bezárása", "view_spoiler": "spoiler megtekintése", - "filter": "szűrő" + "filter": "szűrő", + "edit": "szerkesztés" } \ No newline at end of file diff --git a/public/translations/id/default.json b/public/translations/id/default.json index 2ee91082..057ae59f 100644 --- a/public/translations/id/default.json +++ b/public/translations/id/default.json @@ -147,5 +147,6 @@ "optional": "opsional", "close_thread": "tutup utas", "view_spoiler": "lihat spoiler", - "filter": "menyaring" + "filter": "menyaring", + "edit": "sunting" } \ No newline at end of file diff --git a/public/translations/it/default.json b/public/translations/it/default.json index 5d0d493d..acae16c1 100644 --- a/public/translations/it/default.json +++ b/public/translations/it/default.json @@ -147,5 +147,6 @@ "optional": "opzionale", "close_thread": "chiudi il thread", "view_spoiler": "mostra spoiler", - "filter": "filtro" + "filter": "filtro", + "edit": "modifica" } \ No newline at end of file diff --git a/public/translations/ja/default.json b/public/translations/ja/default.json index 7a84549b..0fcec985 100644 --- a/public/translations/ja/default.json +++ b/public/translations/ja/default.json @@ -147,5 +147,6 @@ "optional": "オプショナル", "close_thread": "スレッドを閉じる", "view_spoiler": "スポイラーを表示", - "filter": "フィルター" + "filter": "フィルター", + "edit": "編集" } \ No newline at end of file diff --git a/public/translations/ko/default.json b/public/translations/ko/default.json index b917b922..e933a350 100644 --- a/public/translations/ko/default.json +++ b/public/translations/ko/default.json @@ -147,5 +147,6 @@ "optional": "선택", "close_thread": "스레드 닫기", "view_spoiler": "스포일러 보기", - "filter": "필터" + "filter": "필터", + "edit": "편집" } \ No newline at end of file diff --git a/public/translations/mr/default.json b/public/translations/mr/default.json index a6bb9e11..4c8c9501 100644 --- a/public/translations/mr/default.json +++ b/public/translations/mr/default.json @@ -147,5 +147,6 @@ "optional": "वैकल्पिक", "close_thread": "थ्रेड बंद करा", "view_spoiler": "स्पॉईलर पहा", - "filter": "फिल्टर" + "filter": "फिल्टर", + "edit": "संपादित करा" } \ No newline at end of file diff --git a/public/translations/nl/default.json b/public/translations/nl/default.json index c03567f1..9e1fa096 100644 --- a/public/translations/nl/default.json +++ b/public/translations/nl/default.json @@ -147,5 +147,6 @@ "optional": "optioneel", "close_thread": "draad sluiten", "view_spoiler": "bekijk spoiler", - "filter": "filter" + "filter": "filter", + "edit": "bewerken" } \ No newline at end of file diff --git a/public/translations/no/default.json b/public/translations/no/default.json index c80a7e11..8f1d6f74 100644 --- a/public/translations/no/default.json +++ b/public/translations/no/default.json @@ -147,5 +147,6 @@ "optional": "valgfritt", "close_thread": "lukk tråd", "view_spoiler": "se spoiler", - "filter": "filter" + "filter": "filter", + "edit": "rediger" } \ No newline at end of file diff --git a/public/translations/pl/default.json b/public/translations/pl/default.json index 07c92ec6..60396994 100644 --- a/public/translations/pl/default.json +++ b/public/translations/pl/default.json @@ -147,5 +147,6 @@ "optional": "opcjonalnie", "close_thread": "zamknij wątek", "view_spoiler": "pokaż spoiler", - "filter": "filtr" + "filter": "filtr", + "edit": "edytuj" } \ No newline at end of file diff --git a/public/translations/pt/default.json b/public/translations/pt/default.json index 4ed41c49..8569b299 100644 --- a/public/translations/pt/default.json +++ b/public/translations/pt/default.json @@ -147,5 +147,6 @@ "optional": "opcional", "close_thread": "fechar tópico", "view_spoiler": "ver spoiler", - "filter": "filtro" + "filter": "filtro", + "edit": "editar" } \ No newline at end of file diff --git a/public/translations/ro/default.json b/public/translations/ro/default.json index 34b556c7..9eb8de50 100644 --- a/public/translations/ro/default.json +++ b/public/translations/ro/default.json @@ -147,5 +147,6 @@ "optional": "opțional", "close_thread": "închide firul", "view_spoiler": "vezi spoilerul", - "filter": "filtru" + "filter": "filtru", + "edit": "editați" } \ No newline at end of file diff --git a/public/translations/ru/default.json b/public/translations/ru/default.json index ec5101bc..3c3ba51e 100644 --- a/public/translations/ru/default.json +++ b/public/translations/ru/default.json @@ -147,5 +147,6 @@ "optional": "необязательный", "close_thread": "закрыть тему", "view_spoiler": "посмотреть спойлер", - "filter": "фильтр" + "filter": "фильтр", + "edit": "редактировать" } \ No newline at end of file diff --git a/public/translations/sq/default.json b/public/translations/sq/default.json index 5cd7dd88..5af61728 100644 --- a/public/translations/sq/default.json +++ b/public/translations/sq/default.json @@ -147,5 +147,6 @@ "optional": "opsionale", "close_thread": "mbyll temën", "view_spoiler": "shikoni spoiler", - "filter": "filtruar" + "filter": "filtruar", + "edit": "redakto" } \ No newline at end of file diff --git a/public/translations/sv/default.json b/public/translations/sv/default.json index 54ab7daa..c62474e2 100644 --- a/public/translations/sv/default.json +++ b/public/translations/sv/default.json @@ -147,5 +147,6 @@ "optional": "valfritt", "close_thread": "stäng tråd", "view_spoiler": "visa spoiler", - "filter": "filter" + "filter": "filter", + "edit": "redigera" } \ No newline at end of file diff --git a/public/translations/te/default.json b/public/translations/te/default.json index a6bfdc5d..22a39f5f 100644 --- a/public/translations/te/default.json +++ b/public/translations/te/default.json @@ -147,5 +147,6 @@ "optional": "ఐచ్ఛికం", "close_thread": "థ్రెడ్‌ను మూసేయండి", "view_spoiler": "స్పోయ్లర్ వీక్షించండి", - "filter": "వడపోత" + "filter": "వడపోత", + "edit": "సవరించు" } \ No newline at end of file diff --git a/public/translations/th/default.json b/public/translations/th/default.json index 1c1da9ec..dcd1242c 100644 --- a/public/translations/th/default.json +++ b/public/translations/th/default.json @@ -147,5 +147,6 @@ "optional": "ไม่จำเป็น", "close_thread": "ปิดกระทู้", "view_spoiler": "ดูสปอยล์เลอร์", - "filter": "ตัวกรอง" + "filter": "ตัวกรอง", + "edit": "แก้ไข" } \ No newline at end of file diff --git a/public/translations/tr/default.json b/public/translations/tr/default.json index 2203c0ff..3db66cf7 100644 --- a/public/translations/tr/default.json +++ b/public/translations/tr/default.json @@ -147,5 +147,6 @@ "optional": "isteğe bağlı", "close_thread": "konuyu kapat", "view_spoiler": "spoileri görüntüle", - "filter": "filtre" + "filter": "filtre", + "edit": "düzenle" } \ No newline at end of file diff --git a/public/translations/uk/default.json b/public/translations/uk/default.json index 1a33c0d8..c0b4e7b0 100644 --- a/public/translations/uk/default.json +++ b/public/translations/uk/default.json @@ -147,5 +147,6 @@ "optional": "необов’язково", "close_thread": "закрити тему", "view_spoiler": "переглянути спойлер", - "filter": "фільтр" + "filter": "фільтр", + "edit": "редагувати" } \ No newline at end of file diff --git a/public/translations/ur/default.json b/public/translations/ur/default.json index 608519cd..1d7038ba 100644 --- a/public/translations/ur/default.json +++ b/public/translations/ur/default.json @@ -147,5 +147,6 @@ "optional": "اختیاری", "close_thread": "موضوع بند کریں", "view_spoiler": "اسپوائلر دیکھیں", - "filter": "فلٹر" + "filter": "فلٹر", + "edit": "ترمیم کریں" } \ No newline at end of file diff --git a/public/translations/vi/default.json b/public/translations/vi/default.json index b1a6ff6d..0bc003fe 100644 --- a/public/translations/vi/default.json +++ b/public/translations/vi/default.json @@ -147,5 +147,6 @@ "optional": "tùy chọn", "close_thread": "đóng chủ đề", "view_spoiler": "xem spoiler", - "filter": "bộ lọc" + "filter": "bộ lọc", + "edit": "chỉnh sửa" } \ No newline at end of file diff --git a/public/translations/zh/default.json b/public/translations/zh/default.json index 59ebefb4..1a6d9e23 100644 --- a/public/translations/zh/default.json +++ b/public/translations/zh/default.json @@ -147,5 +147,6 @@ "optional": "可选的", "close_thread": "关闭主题", "view_spoiler": "查看剧透", - "filter": "过滤器" + "filter": "过滤器", + "edit": "编辑" } \ No newline at end of file diff --git a/src/app.tsx b/src/app.tsx index 8aff1db9..9d8fa691 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -35,18 +35,20 @@ const BoardLayout = () => {
- {isMobile ? ( - <> - - - - ) : ( - <> - - {subplebbitAddress && } - - - )} + {isMobile + ? subplebbitAddress && ( + <> + + + + ) + : subplebbitAddress && ( + <> + + + + + )}
); diff --git a/src/components/post/edit-menu/edit-menu.module.css b/src/components/post/edit-menu/edit-menu.module.css index 634070df..d896b24a 100644 --- a/src/components/post/edit-menu/edit-menu.module.css +++ b/src/components/post/edit-menu/edit-menu.module.css @@ -43,7 +43,8 @@ padding-bottom: 2px; } -.menuItem input[type="text"] { + +.menuItem input[type="text"], .editTextarea { padding: 2px; box-shadow: var(--box-shadow-input); margin-top: 2px; @@ -51,12 +52,12 @@ margin-bottom: 2px; } -.menuItem input[type="text"], .menuItem input[type='number'] { +.menuItem input[type="text"], .menuItem input[type='number'], .editTextarea { border: var(--post-form-field-input-border); outline: none; } -.menuItem input[type="text"]:focus, .menuItem input[type='number']:focus { +.menuItem input[type="text"]:focus, .menuItem input[type='number']:focus, .editTextarea:focus { border: var(--post-form-field-input-focus-border); } @@ -65,6 +66,12 @@ display: block; } +.editTextarea { + width: calc(100% - 12px); + margin-left: 3px; + font-family: inherit; +} + .bottom button { text-transform: capitalize; cursor: pointer; diff --git a/src/components/post/edit-menu/edit-menu.tsx b/src/components/post/edit-menu/edit-menu.tsx index 77f97c36..b1913aaa 100644 --- a/src/components/post/edit-menu/edit-menu.tsx +++ b/src/components/post/edit-menu/edit-menu.tsx @@ -1,5 +1,5 @@ -import { useState } from 'react'; import { Trans, useTranslation } from 'react-i18next'; +import { useEffect, useRef, useState } from 'react'; import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react'; import { PublishCommentEditOptions, useComment, useEditedComment, usePublishCommentEdit } from '@plebbit/plebbit-react-hooks'; import styles from './edit-menu.module.css'; @@ -10,35 +10,46 @@ import _ from 'lodash'; const { addChallenge } = useChallengesStore.getState(); type EditMenuProps = { - cid: string; + commentCid: string; isAccountMod?: boolean; isAccountCommentAuthor?: boolean; isCommentAuthorMod?: boolean; }; -const EditMenu = ({ cid, isAccountMod, isAccountCommentAuthor, isCommentAuthorMod }: EditMenuProps) => { +const EditMenu = ({ commentCid, isAccountMod, isAccountCommentAuthor, isCommentAuthorMod }: EditMenuProps) => { const { t } = useTranslation(); - let post: any; - const comment = useComment({ commentCid: cid }); + const comment = useComment({ commentCid }); const { editedComment } = useEditedComment({ comment }); if (editedComment) { post = editedComment; } else if (comment) { post = comment; } - const isReply = post?.parentCid; + + const { banExpiresAt, content, deleted, locked, parentCid, pinned, removed, spoiler, subplebbitAddress } = post || {}; + const isReply = parentCid; + const [isEditMenuOpen, setIsEditMenuOpen] = useState(false); + const [isContentEditorOpen, setIsContentEditorOpen] = useState(false); + const contentEditorRef = useRef(null); + useEffect(() => { + if (contentEditorRef.current) { + contentEditorRef.current.focus(); + } + }, []); + const defaultPublishOptions: PublishCommentEditOptions = { - deleted: post?.deleted, - removed: post?.removed, - locked: post?.locked, - spoiler: post?.spoiler, - pinned: post?.pinned, - commentAuthor: { banExpiresAt: post?.banExpiresAt }, - commentCid: post?.cid, - subplebbitAddress: post?.subplebbitAddress, + commentAuthor: { banExpiresAt }, + commentCid, + content, + deleted, + locked, + pinned, + removed, + spoiler, + subplebbitAddress, onChallenge: (...args: any) => addChallenge([...args, post]), onChallengeVerification: alertChallengeVerificationFailed, onError: (error: Error) => { @@ -47,6 +58,13 @@ const EditMenu = ({ cid, isAccountMod, isAccountCommentAuthor, isCommentAuthorMo }, }; + useEffect(() => { + if (!isEditMenuOpen) { + setPublishCommentEditOptions(defaultPublishOptions); + setIsContentEditorOpen(false); + } + }, [isEditMenuOpen]); + const [publishCommentEditOptions, setPublishCommentEditOptions] = useState(defaultPublishOptions); const { publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions); @@ -98,15 +116,27 @@ const EditMenu = ({ cid, isAccountMod, isAccountCommentAuthor, isCommentAuthorMo const headingId = useId(); - const handleSaveClick = async () => { - await publishCommentEdit(); + const _publishCommentEdit = async () => { + try { + await publishCommentEdit(); + } catch (error) { + if (error instanceof Error) { + console.warn(error); + alert(error.message); + } + } setIsEditMenuOpen(false); }; return ( <> - - cid && setIsEditMenuOpen(!isEditMenuOpen)} checked={isEditMenuOpen} /> + + commentCid && setIsEditMenuOpen(!isEditMenuOpen)} + checked={isEditMenuOpen} + disabled={!isAccountCommentAuthor && !isAccountMod} + /> {isEditMenuOpen && (isAccountCommentAuthor || isAccountMod) && ( @@ -121,6 +151,23 @@ const EditMenu = ({ cid, isAccountMod, isAccountCommentAuthor, isCommentAuthorMo {_.capitalize(t('delete'))}? ] +
+ +
+ {isContentEditorOpen && ( +
+