feat(editor): add undo redo icons to editor - I204 by teja-pola · Pull Request #212 · accordproject/template-playground

teja-pola · 2025-03-10T21:58:57Z

Closes #204

Changes

Added Undo and Redo icons next to the editor headings in AgreementData.tsx, TemplateMarkdown.tsx, and TemplateModel.tsx.
Implemented undo/redo functionality using useUndoRedo.ts for better state management.
Styled the icons to have a rectangular box shape with a grey background for better visibility.
Ensured all editor headings use the same <h3> tag for consistency.

Screenshots or Video

Related Issues

Issue Add Undo and Redo Icons to Editors with Optimized Functionality & Standardize Headings #204

Author Checklist

Ensure you provide a DCO sign-off for your commits using the --signoff option of git commit.
Vital features and changes captured in unit and/or integration tests.
Commit messages follow AP format.
Extend the documentation, if necessary.
Merging to main from fork:undo-redo-feature.

netlify · 2025-03-10T21:59:16Z

✅ Deploy Preview for ap-template-playground ready!

Name	Link
🔨 Latest commit	`5926053`
🔍 Latest deploy log	https://app.netlify.com/sites/ap-template-playground/deploys/67d9390a80f0e800086adbde
😎 Deploy Preview	https://deploy-preview-212--ap-template-playground.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Owaiseimdad · 2025-03-11T04:32:05Z

@teja-pola is there any implementation doc for this? I mean, just want to understand why the feature was necessary. Thanks.

src/components/useUndoRedo.ts

Owaiseimdad · 2025-03-11T04:40:50Z

src/editors/editorsContainer/AgreementData.tsx

-          from the template.
-        </span>
+        <div>
+          <FaUndo onClick={undo} style={{ cursor: "pointer", color: textColor, marginRight: "8px" }} />


Good implementation here to use react icons. Also add title so that if there is a crawler then can understand what is it.

src/editors/editorsContainer/TemplateModel.tsx

surya4419 · 2025-03-11T18:32:33Z

@teja-pola is there any implementation doc for this? I mean, just want to understand why the feature was necessary. Thanks.

uhh, i think there is a good use of this feature, since its a editor after all, undo redo really helps someone while editing.

Owaiseimdad · 2025-03-11T18:35:52Z

@teja-pola is there any implementation doc for this? I mean, just want to understand why the feature was necessary. Thanks.

uhh, i think there is a good use of this feature, since its a editor after all, undo redo really helps someone while editing.

Totally agree here @surya4419 , but just wanted a doc to understand how the design is and we can make a compontent out of it and use in every editor possible in future.

DianaLease

When I click the undo/redo buttons, I see the changes reflected in the code editor but not in the preview pane and it also doesn't update any errors in the code editor. For example, if I make a change that results in an error and then hit undo, the error still persists.

teja-pola · 2025-03-13T22:30:07Z

When I click the undo/redo buttons, I see the changes reflected in the code editor but not in the preview pane and it also doesn't update any errors in the code editor. For example, if I make a change that results in an error and then hit undo, the error still persists.

@DianaLease Thanks for your observation. I will work on them, btw could you please specify what type of error you talking about, that could help me tackle this more better.

DianaLease · 2025-03-13T22:37:29Z

When I click the undo/redo buttons, I see the changes reflected in the code editor but not in the preview pane and it also doesn't update any errors in the code editor. For example, if I make a change that results in an error and then hit undo, the error still persists.

@DianaLease Thanks for your observation. I will work on them, btw could you please specify what type of error you talking about, that could help me tackle this more better.

For example, in the concerto model editor, change the text "line1" to "line12" and see an error pop-up:

teja-pola · 2025-03-14T00:30:39Z

@DianaLease This is done. Will update to latest main once you merge #206 (cause its ready to be merged)

src/components/useUndoRedo.ts

src/AgreementHtml.tsx

Signed-off-by: Dharma Teja <dteja2468@gmail.com>

teja-pola · 2025-03-18T09:21:47Z

Currently updated with your reviewed changes and main. @DianaLease

* fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * update is checked Signed-off-by: Dharma Teja <dteja2468@gmail.com> * feat(editor): add undo redo icons to editor - I204 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * feat(editor): add undo redo icons to editor - I204 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * feat(editor): add undo redo icons to editor - I204 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * feat(editor): add undo redo icons to editor - I204 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * feat(editor): add undo redo icons to editor - I204 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * feat(editor): add undo redo icons to editor - I204 Signed-off-by: Dharma Teja <dteja2468@gmail.com> --------- Signed-off-by: Dharma Teja <dteja2468@gmail.com>

* fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * fix(button): fix dark mode toggle click - I201 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * update is checked Signed-off-by: Dharma Teja <dteja2468@gmail.com> * feat(editor): add undo redo icons to editor - I204 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * feat(editor): add undo redo icons to editor - I204 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * feat(editor): add undo redo icons to editor - I204 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * feat(editor): add undo redo icons to editor - I204 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * feat(editor): add undo redo icons to editor - I204 Signed-off-by: Dharma Teja <dteja2468@gmail.com> * feat(editor): add undo redo icons to editor - I204 Signed-off-by: Dharma Teja <dteja2468@gmail.com> --------- Signed-off-by: Dharma Teja <dteja2468@gmail.com> Signed-off-by: surya4419 <suryaa4419@gmail.com>

teja-pola requested a review from a team as a code owner March 10, 2025 21:58

Owaiseimdad suggested changes Mar 11, 2025

View reviewed changes

teja-pola force-pushed the teja/i204/add-undo-redo-icons branch from 3e575df to c9cdc49 Compare March 13, 2025 11:35

DianaLease requested changes Mar 13, 2025

View reviewed changes

teja-pola force-pushed the teja/i204/add-undo-redo-icons branch from c9cdc49 to daed493 Compare March 15, 2025 13:39

DianaLease requested changes Mar 17, 2025

View reviewed changes

src/components/useUndoRedo.ts Outdated Show resolved Hide resolved

src/AgreementHtml.tsx Outdated Show resolved Hide resolved

teja-pola added 10 commits March 18, 2025 14:18

fix(button): fix dark mode toggle click - I201

6f2b899

Signed-off-by: Dharma Teja <dteja2468@gmail.com>

fix(button): fix dark mode toggle click - I201

1d568d6

Signed-off-by: Dharma Teja <dteja2468@gmail.com>

fix(button): fix dark mode toggle click - I201

122432b

Signed-off-by: Dharma Teja <dteja2468@gmail.com>

update is checked

57261e5

Signed-off-by: Dharma Teja <dteja2468@gmail.com>

feat(editor): add undo redo icons to editor - I204

bd00e3f

Signed-off-by: Dharma Teja <dteja2468@gmail.com>

feat(editor): add undo redo icons to editor - I204

289429e

Signed-off-by: Dharma Teja <dteja2468@gmail.com>

feat(editor): add undo redo icons to editor - I204

f3a4bec

Signed-off-by: Dharma Teja <dteja2468@gmail.com>

feat(editor): add undo redo icons to editor - I204

e26ba48

Signed-off-by: Dharma Teja <dteja2468@gmail.com>

feat(editor): add undo redo icons to editor - I204

2fafb57

Signed-off-by: Dharma Teja <dteja2468@gmail.com>

feat(editor): add undo redo icons to editor - I204

5926053

Signed-off-by: Dharma Teja <dteja2468@gmail.com>

teja-pola force-pushed the teja/i204/add-undo-redo-icons branch from 06dcee1 to 5926053 Compare March 18, 2025 09:12

DianaLease approved these changes Mar 18, 2025

View reviewed changes

DianaLease merged commit 622297c into accordproject:main Mar 18, 2025
7 checks passed

Uh oh!

Conversation

teja-pola commented Mar 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Closes #204

Changes

Screenshots or Video

Related Issues

Author Checklist

Uh oh!

netlify bot commented Mar 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for ap-template-playground ready!

Uh oh!

Owaiseimdad commented Mar 11, 2025

Uh oh!

Uh oh!

Owaiseimdad Mar 11, 2025

Choose a reason for hiding this comment

Uh oh!

teja-pola Mar 13, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

surya4419 commented Mar 11, 2025

Uh oh!

Owaiseimdad commented Mar 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

DianaLease left a comment

Choose a reason for hiding this comment

Uh oh!

teja-pola commented Mar 13, 2025

Uh oh!

DianaLease commented Mar 13, 2025

Uh oh!

teja-pola commented Mar 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

teja-pola commented Mar 18, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

teja-pola commented Mar 10, 2025 •

edited

Loading

netlify bot commented Mar 10, 2025 •

edited

Loading

Owaiseimdad commented Mar 11, 2025 •

edited

Loading

teja-pola commented Mar 14, 2025 •

edited

Loading