Skip to content

fix cancel on edit #2592

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
+67 −14
Open

fix cancel on edit #2592

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c4b2bd6
fix cancel on edit
Oct 1, 2025
2af9e45
removing dead code and improved correct one
Oct 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions components/comment-edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ export default function CommentEdit ({ comment, editThreshold, onSuccess, onCanc
}}
schema={commentSchema}
onSubmit={onSubmit}
storageKeyPrefix={`comment-edit-${comment.id}`}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this somehow related to #2568?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This use local storage to save a draft of the user's edit, the draft is used to verify that there is actually text to be modified as reply.js. If you prefer not to use local storage we could open a modal when you want to close the edit.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not really needed and kind of out of the scope of the PR but I appreciate the fact that it makes the draft experience consistent in all typing modes, and it's also the way textboxes are handled in other places.

So that's why I didn't comment on it. If useless, it can just be removed and the obstacle modal would be there only to guard the state setting

Copy link
Member

@ekzyis ekzyis Oct 20, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the draft is used to verify that there is actually text to be modified as reply.js

Ahh ok, that makes sense!

Sorry, I could have figured this out if I just looked at the other code. I tend to now just immediately ask if something is really related if it's not immediately clear since I wasted too much time in my life trying to figure out how something in someone else's code is related to a ticket or bug, just for it to end up not being related at all (and maybe even have a bug)

>
<MarkdownInput
name='text'
Expand Down
24 changes: 23 additions & 1 deletion components/comment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@ import LinkToContext from './link-to-context'
import Boost from './boost-button'
import { gql, useApolloClient } from '@apollo/client'
import classNames from 'classnames'
import { useShowModal } from './modal'
import { CancelWorkConfirm } from './confirm-modal'

function Parent ({ item, rootText }) {
const root = useRoot()
Expand Down Expand Up @@ -100,6 +102,7 @@ export default function Comment ({
rootText, noComments, noReply, truncate, depth, pin, setDisableRetry, disableRetry,
navigator
}) {
const showModal = useShowModal()
const [edit, setEdit] = useState()
const { me } = useMe()
const isHiddenFreebie = me?.privates?.satsFilter !== 0 && !item.mine && item.freebie && !item.freedFreebie
Expand Down Expand Up @@ -246,7 +249,26 @@ export default function Comment ({
</>
}
edit={edit}
toggleEdit={e => { setEdit(!edit) }}
toggleEdit={e => {
if (edit) {
const editText = window.localStorage.getItem(`comment-edit-${item.id}-text`)
if (editText && editText.trim() !== item.text.trim()) {
showModal(onClose => (
<CancelWorkConfirm
onConfirm={() => {
window.localStorage.removeItem(`comment-edit-${item.id}-text`)
setEdit(false)
}}
onClose={onClose}
/>
))
} else {
setEdit(false)
}
} else {
setEdit(true)
}
}}
editText={edit ? 'cancel' : 'edit'}
/>}

Expand Down
38 changes: 38 additions & 0 deletions components/confirm-modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import Button from 'react-bootstrap/Button'

export default function ConfirmModal ({
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suppose this can be used directly instead of also creating CancelWorkConfirm and DeleteConfirm (which you didn't use but I get why you created it)

Maybe this can be called generically ObstacleModal but I'm just thinking out loud, there's no need to do this.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

which you didn't use

@pory-gone Please don't add code that is dead on arrival

You're more than welcome to refactor something, but please not while trying to fix something and not in a way that it's half-done.

onConfirm,
message = 'Are you sure?',
confirmText = 'yep',
confirmVariant = 'info',
onClose
}) {
return (
<>
<p className='fw-bolder'>{message}</p>
<div className='d-flex justify-content-end'>
<Button
variant={confirmVariant}
onClick={() => {
onConfirm()
onClose()
}}
>
{confirmText}
</Button>
</div>
</>
)
}

export function CancelWorkConfirm ({ onConfirm, onClose }) {
return (
<ConfirmModal
message='Are you sure? You will lose your work'
confirmText='yes'
confirmVariant='danger'
onConfirm={onConfirm}
onClose={onClose}
/>
)
}
18 changes: 5 additions & 13 deletions components/reply.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { FeeButtonProvider, postCommentBaseLineItems, postCommentUseRemoteLineIt
import { commentSchema } from '@/lib/validate'
import { ItemButtonBar } from './post'
import { useShowModal } from './modal'
import { Button } from 'react-bootstrap'
import { CancelWorkConfirm } from './confirm-modal'
import { useRoot } from './root'
import { CREATE_COMMENT } from '@/fragments/paidAction'
import { injectComment } from '@/lib/comments'
Expand Down Expand Up @@ -99,18 +99,10 @@ export default forwardRef(function Reply ({
const text = window.localStorage.getItem('reply-' + parentId + '-' + 'text')
if (text?.trim()) {
showModal(onClose => (
<>
<p className='fw-bolder'>Are you sure? You will lose your work</p>
<div className='d-flex justify-content-end'>
<Button
variant='info' onClick={() => {
onCancel()
onClose()
}}
>yep
</Button>
</div>
</>
<CancelWorkConfirm
onConfirm={onCancel}
onClose={onClose}
/>
))
} else {
onCancel()
Expand Down