Storing DOM changes #27
Conversation
WalkthroughWalkthroughThe recent updates to the Changes
Sequence Diagram(s) (Beta)sequenceDiagram
participant User
participant UI as User Interface
participant Utils as Utility Functions
User->>UI: Double-click element
UI->>Utils: loadModifications()
Utils-->>UI: Modifications data
UI->>UI: setEditorMode()
User->>UI: Double-click element
UI->>Utils: saveModification(element, content)
Utils-->>UI: Save confirmation
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (3)
- apps/mocksi-lite/consts.ts (1 hunks)
- apps/mocksi-lite/content/content.tsx (3 hunks)
- apps/mocksi-lite/utils.ts (2 hunks)
Files skipped from review due to trivial changes (1)
- apps/mocksi-lite/consts.ts
Additional comments not posted (2)
apps/mocksi-lite/utils.ts (1)
22-53: Consider avoiding direct manipulation ofinnerHTMLdue to potential XSS vulnerabilities.- elemToModify.innerHTML = value; + elemToModify.textContent = value;Likely invalid or redundant comment.
apps/mocksi-lite/content/content.tsx (1)
186-186: The integration ofloadModificationsinsetEditorModealigns well with the PR objectives.
apps/mocksi-lite/utils.ts
Outdated
| export const loadModifications = () => { | ||
| const modifications = JSON.parse( | ||
| localStorage.getItem(MOCKSI_MODIFICATIONS) || "{}", | ||
| ); | ||
| for (const modification of Object.entries(modifications)) { | ||
| const [querySelector, value] = modification; | ||
| const hasIndex = querySelector.match(/\[+[0-9]\]/); | ||
| if (hasIndex) { | ||
| const index: number = +hasIndex[0].replace("[", "").replace("]", ""); | ||
| const elemToModify = document.querySelectorAll( | ||
| querySelector.replace(hasIndex[0], ""), | ||
| )[index]; | ||
| //@ts-ignore EXTREMELY INSECURE!!!!!!!! | ||
| elemToModify.innerHTML = value; | ||
| } else { | ||
| const [elemToModify] = document.querySelectorAll(querySelector); | ||
| //@ts-ignore EXTREMELY INSECURE!!!!!!!! | ||
| elemToModify.innerHTML = value; | ||
| } | ||
| } | ||
| console.log("loadedModifications!", modifications); | ||
| }; |
There was a problem hiding this comment.
Consider replacing innerHTML with textContent to mitigate XSS risks.
- elemToModify.innerHTML = value;
+ elemToModify.textContent = value;Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| export const loadModifications = () => { | |
| const modifications = JSON.parse( | |
| localStorage.getItem(MOCKSI_MODIFICATIONS) || "{}", | |
| ); | |
| for (const modification of Object.entries(modifications)) { | |
| const [querySelector, value] = modification; | |
| const hasIndex = querySelector.match(/\[+[0-9]\]/); | |
| if (hasIndex) { | |
| const index: number = +hasIndex[0].replace("[", "").replace("]", ""); | |
| const elemToModify = document.querySelectorAll( | |
| querySelector.replace(hasIndex[0], ""), | |
| )[index]; | |
| //@ts-ignore EXTREMELY INSECURE!!!!!!!! | |
| elemToModify.innerHTML = value; | |
| } else { | |
| const [elemToModify] = document.querySelectorAll(querySelector); | |
| //@ts-ignore EXTREMELY INSECURE!!!!!!!! | |
| elemToModify.innerHTML = value; | |
| } | |
| } | |
| console.log("loadedModifications!", modifications); | |
| }; | |
| export const loadModifications = () => { | |
| const modifications = JSON.parse( | |
| localStorage.getItem(MOCKSI_MODIFICATIONS) || "{}", | |
| ); | |
| for (const modification of Object.entries(modifications)) { | |
| const [querySelector, value] = modification; | |
| const hasIndex = querySelector.match(/\[+[0-9]\]/); | |
| if (hasIndex) { | |
| const index: number = +hasIndex[0].replace("[", "").replace("]", ""); | |
| const elemToModify = document.querySelectorAll( | |
| querySelector.replace(hasIndex[0], ""), | |
| )[index]; | |
| //@ts-ignore EXTREMELY INSECURE!!!!!!!! | |
| elemToModify.textContent = value; | |
| } else { | |
| const [elemToModify] = document.querySelectorAll(querySelector); | |
| //@ts-ignore EXTREMELY INSECURE!!!!!!!! | |
| elemToModify.textContent = value; | |
| } | |
| } | |
| console.log("loadedModifications!", modifications); | |
| }; |
| saveModification( | ||
| parentElement as HTMLElement, | ||
| parentElement?.innerHTML || parentElement?.innerText || "", | ||
| ); |
There was a problem hiding this comment.
Ensure consistent handling of DOM content. Consider using textContent for better security and consistency.
- parentElement?.innerHTML || parentElement?.innerText || "",
+ parentElement?.textContent || "",Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| saveModification( | |
| parentElement as HTMLElement, | |
| parentElement?.innerHTML || parentElement?.innerText || "", | |
| ); | |
| saveModification( | |
| parentElement as HTMLElement, | |
| parentElement?.textContent || "", | |
| ); |
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- apps/mocksi-lite/content/content.tsx (4 hunks)
Files skipped from review as they are similar to previous changes (1)
- apps/mocksi-lite/content/content.tsx
|
Your free trial has expired. To keep using Ellipsis, sign up at https://app.ellipsis.dev for $20/seat/month or reach us at [email protected] |
|
I'm aware of the security risks of manipulating |
There was a problem hiding this comment.
Actionable comments posted: 1
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (3)
- apps/mocksi-lite/content/Popup/CreateDemo/DemoItem.tsx (2 hunks)
- apps/mocksi-lite/content/content.tsx (3 hunks)
- apps/mocksi-lite/utils.ts (2 hunks)
Files skipped from review as they are similar to previous changes (2)
- apps/mocksi-lite/content/content.tsx
- apps/mocksi-lite/utils.ts
Additional comments not posted (1)
apps/mocksi-lite/content/Popup/CreateDemo/DemoItem.tsx (1)
6-6: Import statement added forloadModifications.This import is necessary for the new functionality as per the PR description.
| @@ -16,7 +17,7 @@ const DemoItem = ({ name, customer }: Demo) => { | |||
| <Button variant={Variant.icon} onClick={() => setEditorMode(true)}> | |||
| <img src={editIcon} alt={"editIcon"} /> | |||
| </Button> | |||
| <Button variant={Variant.icon} onClick={() => setEditorMode(false)}> | |||
| <Button variant={Variant.icon} onClick={() => loadModifications()}> | |||
There was a problem hiding this comment.
Tip
Codebase Verification
The loadModifications function retrieves modifications from localStorage and applies them to the DOM elements. This functionality is different from setEditorMode(false), which likely had a different purpose related to editor state management.
loadModificationsfocuses on applying stored modifications to the DOM.setEditorMode(false)likely managed the editor's state, such as toggling the editor mode off.
These functions serve different purposes, and replacing setEditorMode(false) with loadModifications might lead to unintended behavior if the editor state management is still required.
- Ensure that the editor state management is handled appropriately elsewhere if
setEditorMode(false)is removed.
Analysis chain
Change in onClick handler to use loadModifications.
Ensure that loadModifications is properly handling all expected scenarios since it replaces setEditorMode(false), which likely had a different purpose.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify all scenarios where `loadModifications` is used.
# Test: Search for the function usage. Expect: Proper error handling and functionality coverage.
rg --type typescript $'loadModifications'
Length of output: 75
Script:
#!/bin/bash
# Description: Verify all scenarios where `loadModifications` is used.
# Test: Search for the function usage. Expect: Proper error handling and functionality coverage.
rg --type ts 'loadModifications'
Length of output: 434
Script:
#!/bin/bash
# Description: Extract the implementation of `loadModifications` to verify its functionality.
# Test: Retrieve the function definition. Expect: Proper handling of scenarios and functionality coverage.
ast-grep --lang ts --pattern 'const loadModifications = () => { $$$ }'
Length of output: 1525
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (3)
- apps/mocksi-lite/consts.ts (1 hunks)
- apps/mocksi-lite/content/Popup/CreateDemo/DemoItem.tsx (2 hunks)
- apps/mocksi-lite/content/content.tsx (3 hunks)
Files skipped from review as they are similar to previous changes (3)
- apps/mocksi-lite/consts.ts
- apps/mocksi-lite/content/Popup/CreateDemo/DemoItem.tsx
- apps/mocksi-lite/content/content.tsx
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- apps/mocksi-lite/content/content.tsx (3 hunks)
Files skipped from review as they are similar to previous changes (1)
- apps/mocksi-lite/content/content.tsx
There was a problem hiding this comment.
Looking great! 🚢
FYI: in a future PR, we'll have to make saveModification a little more complex so we can add things like undo/redo.
This is more of less what I'm thinking of: https://dev.to/samuelkollat/beyond-basics-transform-your-typescript-codebase-with-command-design-pattern-3f4b
Screen.Recording.2024-06-04.at.12.31.33.mov
Summary by CodeRabbit
New Features
Enhancements
DemoItemcomponent to load modifications on button click.elementWithBorderfunction to save modifications automatically.