Cu 86b0wgnt5 Highlight changes #59
Conversation
|
Task linked: CU-86b0wgnt5 Highlight Changes after they are made |
WalkthroughThese changes introduce new functionality to highlight modified content within the DOM in the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ContentApp.tsx
participant Highlighter
participant DOM
User ->> ContentApp.tsx: Toggle Highlight
ContentApp.tsx ->> Highlighter: initHighlighter()
Highlighter ->> DOM: Highlight modifications
DOM -->> Highlighter: Modifications highlighted
Highlighter ->> ContentApp.tsx: Highlighting complete
Poem
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: 10
Outside diff range and nitpick comments (3)
apps/mocksi-lite/commands/Command.ts (1)
Line range hint
14-30: Review updatedbuildQuerySelectorfunction.
- Ensure that the addition of
{newValue}tokeyToSavedoes not introduce any security vulnerabilities, such as XSS, ifnewValueis not sanitized.- Consider the implications of this change on existing functionality and whether it might break any existing selectors.
apps/mocksi-lite/content/ContentApp.tsx (2)
Line range hint
39-58: Review new state management for highlighting changes.
- Consider the implications of directly manipulating DOM elements in response to state changes, which could lead to performance issues.
- Ensure that the state management correctly synchronizes with the actual visibility of highlights.
95-100: Checkbox implementation for toggling highlights.
- Ensure accessibility by adding an appropriate
labeloraria-labelto the checkbox for better screen reader support.
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (7)
- apps/mocksi-lite/commands/Command.ts (2 hunks)
- apps/mocksi-lite/consts.ts (1 hunks)
- apps/mocksi-lite/content/ContentApp.tsx (4 hunks)
- apps/mocksi-lite/content/EditMode/actions.ts (2 hunks)
- apps/mocksi-lite/content/EditMode/editMode.ts (3 hunks)
- apps/mocksi-lite/content/EditMode/highlighter.ts (1 hunks)
- apps/mocksi-lite/utils.ts (3 hunks)
Files skipped from review due to trivial changes (1)
- apps/mocksi-lite/consts.ts
Additional comments not posted (5)
apps/mocksi-lite/utils.ts (2)
103-134: Refactor the complex logic inmodifyElementInnerHTMLfor clarity and maintainability. Consider extracting parts of the code into separate functions.
[REFACTOR_Suggestion]- const hasIndex = selector.match(/\[[0-9]+\]/); - const valueInQuerySelector = selector.match(/\{[a-zA-Z0-9]+\}/); - let elemToModify: Element | null; - if (hasIndex) { - const filteredQuerySelector = valueInQuerySelector - ? selector.replace(hasIndex[0], "").replace(valueInQuerySelector[0], "") - : selector.replace(hasIndex[0], ""); - const index: number = +hasIndex[0].replace("[", "").replace("]", ""); - elemToModify = - document.querySelectorAll(filteredQuerySelector.replace(hasIndex[0], ""))[ - index - ] || null; - } else { - elemToModify = document.querySelector( - valueInQuerySelector - ? selector.replace(valueInQuerySelector[0], "") - : selector, - ); - } + const elemToModify = resolveElement(selector); + if (elemToModify) { + elemToModify.textContent = newContent; + } + function resolveElement(selector) { + const hasIndex = /\[[0-9]+\]/.test(selector); + const indexMatch = selector.match(/\[([0-9]+)\]/); + const index = indexMatch ? parseInt(indexMatch[1], 10) : null; + const cleanedSelector = selector.replace(/\[.*?\]|\{.*?\}/g, ''); + const elements = document.querySelectorAll(cleanedSelector); + return index != null ? elements[index] : document.querySelector(cleanedSelector); + }
71-71: Verify that all necessary clean-up operations are performed when modifications are undone.apps/mocksi-lite/content/EditMode/editMode.ts (3)
9-9: Ensure that theinitHighlighterfunction is properly initialized and does not cause any side effects when called multiple times.Verification successful
The
initHighlighterfunction implementation ensures that a newHighlighterinstance is only created if an element with the IDMOCKSI_HIGHLIGHTER_IDdoes not already exist in the document. This check makes the function idempotent, as it prevents multiple initializations of theHighlighter.
highlighter.ts:34:if (!document.getElementById(MOCKSI_HIGHLIGHTER_ID)) {highlighter.ts:35:ContentHighlighter = new Highlighter();highlighter.ts:36:}This ensures that calling
initHighlightermultiple times does not cause any side effects.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the idempotency of `initHighlighter`. # Test: Search for the implementation of `initHighlighter` to ensure it can be safely called multiple times. ast-grep --lang javascript --pattern $'function initHighlighter() { $$$ }'Length of output: 77
Script:
#!/bin/bash # Description: Locate the definition of the `initHighlighter` function. # Use ripgrep to search for the `initHighlighter` function definition. rg 'function initHighlighter' --glob '**/*.js' --glob '**/*.ts'Length of output: 65
Script:
#!/bin/bash # Description: Locate the definition or import of `initHighlighter` within the `highlighter` module. # Use ripgrep to search for `initHighlighter` within the `highlighter` module. rg 'initHighlighter' --glob '**/highlighter.js' --glob '**/highlighter.ts'Length of output: 162
Script:
#!/bin/bash # Description: Extract the implementation of `initHighlighter` function from `highlighter.ts`. # Use ast-grep to extract the `initHighlighter` function implementation. ast-grep --lang typescript --pattern $'export const initHighlighter = () => { $$$ }' apps/mocksi-lite/content/EditMode/highlighter.tsLength of output: 539
16-16: Verify that the double-click event listener is properly removed when the editor is turned off to avoid potential memory leaks.Verification successful
The
addEventListenerandremoveEventListenercalls for the double-click event are present in theeditMode.tsfile, indicating that the event listener is being added and removed properly.
apps/mocksi-lite/content/EditMode/editMode.ts: document.body.addEventListener("dblclick", onDoubleClickText);apps/mocksi-lite/content/EditMode/editMode.ts: document.body.removeEventListener("dblclick", onDoubleClickText);This confirms that the double-click event listener is properly managed.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Ensure that the double-click event listener is properly managed. # Test: Check for proper addition and removal of event listeners in the code. rg --type python $'addEventListener|removeEventListener'Length of output: 88
Script:
#!/bin/bash # Description: Ensure that the double-click event listener is properly managed. # Test: Check for proper addition and removal of event listeners in the TypeScript code. rg --type ts 'addEventListener|removeEventListener'Length of output: 537
27-27: Ensure thathideHighlightscorrectly handles all edge cases, such as when there are no highlights to hide.Verification successful
The
hideHighlightsmethod implementation inhighlighter.tshandles hiding elements with the classMOCKSI_HIGHLIGHTER_IDby setting their display style to "none". This approach inherently handles the scenario where no elements match the selector, asquerySelectorAllwill simply return an empty NodeList, and thefor...ofloop will not execute any iterations.
- apps/mocksi-lite/content/EditMode/highlighter.ts:
hideHighlightsmethod implementationScripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the edge case handling in `hideHighlights`. # Test: Search for the `hideHighlights` method implementation to check its robustness. ast-grep --lang javascript --pattern $'method hideHighlights() { $$$ }'Length of output: 530
Script:
#!/bin/bash # Description: Verify the edge case handling in `hideHighlights`. # Test: Search for the `hideHighlights` method implementation to check its robustness. ast-grep --lang javascript --pattern 'function hideHighlights() { $$$ }'Length of output: 76
Script:
#!/bin/bash # Description: Verify the edge case handling in `hideHighlights`. # Test: Search for the `hideHighlights` method implementation within classes or objects to check its robustness. ast-grep --lang javascript --pattern $'class $_ { $$$ hideHighlights() { $$$ } $$$ }' || ast-grep --lang javascript --pattern $'const $_ = { $$$ hideHighlights() { $$$ } $$$ }'Length of output: 98
Script:
#!/bin/bash # Description: Locate all occurrences of `hideHighlights` in the codebase to understand its implementation and usage. # Test: Use `rg` to search for all occurrences of `hideHighlights`. rg 'hideHighlights'Length of output: 261
Script:
#!/bin/bash # Description: Extract the implementation of `hideHighlights` from `highlighter.ts` to check its robustness. # Test: Use `rg` to extract the implementation of `hideHighlights`. rg 'hideHighlights = () =>' apps/mocksi-lite/content/EditMode/highlighter.ts -A 10Length of output: 84
Script:
#!/bin/bash # Description: Locate the complete implementation of `hideHighlights` in `highlighter.ts` to check its robustness. # Test: Use `rg` to search more broadly for the `hideHighlights` method. rg 'hideHighlights' apps/mocksi-lite/content/EditMode/highlighter.ts -A 20Length of output: 565
| const { selector, dom_after, dom_before } = alteration; | ||
| modifyElementInnerHTML(selector, dom_before, dom_after); |
There was a problem hiding this comment.
Consider using DOM manipulation methods safer than innerHTML to avoid potential cross-site scripting (XSS) vulnerabilities.
- modifyElementInnerHTML(selector, dom_before, dom_after);
+ const element = document.querySelector(selector);
+ if (element) {
+ element.textContent = dom_after;
+ }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. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const { selector, dom_after, dom_before } = alteration; | |
| modifyElementInnerHTML(selector, dom_before, dom_after); | |
| const { selector, dom_after, dom_before } = alteration; | |
| const element = document.querySelector(selector); | |
| if (element) { | |
| element.textContent = dom_after; | |
| } |
| replaceValueInDOM(parentElement, nodeWithTextArea, newValue); | ||
| saveModification(parentElement as HTMLElement, newValue, oldValue); |
There was a problem hiding this comment.
Ensure proper error handling in applyChanges when parentElement is null.
Consider adding a check for parentElement before proceeding with operations that assume its existence.
| function replaceValueInDOM( | ||
| parentElement: HTMLElement | null, | ||
| nodeWithTextArea: HTMLElement, | ||
| newValue: string, | ||
| ) { | ||
| // const previousText = getPreviousNodeValue(nodeWithTextArea, oldValue); | ||
| const nodeTextToReplace = document.createTextNode(newValue); | ||
| parentElement?.replaceChild(nodeTextToReplace, nodeWithTextArea); | ||
| ContentHighlighter.highlightNode(nodeTextToReplace); | ||
| parentElement?.normalize(); | ||
| } |
There was a problem hiding this comment.
Review of new function replaceValueInDOM.
- The function lacks error handling for null
parentElement. - Consider re-introducing the commented-out logic for obtaining the previous text value, as it might be necessary for undo operations or other features.
- The normalization of
parentElementafter replacing the child could potentially alter other node structures. Ensure this side effect is intended.
| const clonedNode = nodeWithTextArea.parentElement?.cloneNode( | ||
| true, | ||
| ) as HTMLElement; | ||
| for (const node of clonedNode?.childNodes || []) { | ||
| if ((node as HTMLElement)?.id === "mocksiSelectedText") { | ||
| clonedNode?.replaceChild(document.createTextNode(oldValue), node); | ||
| clonedNode?.normalize(); | ||
| break; | ||
| } | ||
| } | ||
| return ttt.innerHTML || ""; | ||
| return clonedNode.innerHTML || ""; |
There was a problem hiding this comment.
Optimize getPreviousNodeValue by directly accessing the child node instead of looping through all child nodes.
This approach reduces complexity and improves performance, especially for nodes with many children.
| highlightNode = (elementToHighlight: Text) => { | ||
| this.contentRanger.selectNodeContents(elementToHighlight); | ||
| const { x, y, width, height } = | ||
| this.contentRanger.getBoundingClientRect() || {}; | ||
| const textHighlight = highlight({ x, y, width, height }); | ||
| document.body.appendChild(textHighlight); | ||
| }; |
There was a problem hiding this comment.
Ensure robustness in highlightNode.
The method lacks error handling for cases where elementToHighlight might not be part of the document anymore, which can cause selectNodeContents to throw an error.
| hideHighlights = () => { | ||
| for (const node of document.querySelectorAll( | ||
| `div.${MOCKSI_HIGHLIGHTER_ID}`, | ||
| )) { | ||
| (node as HTMLElement).style.display = "none"; | ||
| } | ||
| }; |
There was a problem hiding this comment.
Review visibility toggle methods hideHighlights and showHighlights.
- Combine these methods into a single method that accepts a visibility parameter to reduce redundancy.
- Ensure that toggling visibility does not cause reflows or repaints that could affect performance.
Also applies to: 22-28
| const highlight = ({ | ||
| x, | ||
| y, | ||
| width, | ||
| height, | ||
| }: { x: number; y: number; width: number; height: number }) => { | ||
| const highlightDiv = document.createElement("div"); | ||
| highlightDiv.className = MOCKSI_HIGHLIGHTER_ID; | ||
| highlightDiv.style.position = "absolute"; | ||
| highlightDiv.style.top = `${window.scrollY + y + -2}px`; | ||
| highlightDiv.style.left = `${window.scrollX + x + -2}px`; | ||
| // 4px more because we're removing 2px each side because of the border | ||
| highlightDiv.style.width = `${width + 4}px`; | ||
| highlightDiv.style.height = `${height + 4}px`; | ||
| highlightDiv.style.border = "2px solid purple"; | ||
| highlightDiv.style.backgroundColor = "transparent"; | ||
| return highlightDiv; | ||
| }; |
There was a problem hiding this comment.
The highlight helper function needs optimization.
- Consider caching created divs for performance.
- Adjust the style calculations to ensure they are not recalculated every time a highlight is created.
| @@ -39,7 +39,7 @@ | |||
| previousText: string, | |||
| ) => { | |||
| const saveModificationCommand = new SaveModificationCommand(localStorage, { | |||
| keyToSave: buildQuerySelector(parentElement), | |||
| keyToSave: buildQuerySelector(parentElement, newText), | |||
There was a problem hiding this comment.
Tip
Codebase Verification
Ensure that the buildQuerySelector function handles special characters in newValue to prevent potential security risks, such as injection attacks.
apps/mocksi-lite/commands/Command.ts, lines definingbuildQuerySelectorfunction.
Analysis chain
Ensure that the buildQuerySelector function is safely handling the newText for any potential security risks, given it's used in key generation for storage.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check the implementation of `buildQuerySelector` to ensure it handles special characters and potential security risks.
# Test: Search for the function implementation and ensure it escapes special characters.
ast-grep --lang javascript --pattern $'function buildQuerySelector($_, $_) {
$$$
}'
Length of output: 86
Script:
#!/bin/bash
# Use a more flexible search pattern with `ast-grep` to locate the `buildQuerySelector` function.
ast-grep --lang javascript --pattern 'function buildQuerySelector($$$)'
# If the above does not work, use `rg` to search for the function name in the codebase.
rg 'function buildQuerySelector'
Length of output: 453
Script:
#!/bin/bash
# Search for the `buildQuerySelector` function name without the `function` keyword to catch different definitions.
rg 'buildQuerySelector'
# Search for import statements that might import the `buildQuerySelector` function.
rg 'import.*buildQuerySelector'
Length of output: 260
Script:
#!/bin/bash
# Fetch the implementation of the `buildQuerySelector` function from `apps/mocksi-lite/commands/Command.ts`.
ast-grep --lang javascript --pattern 'export const buildQuerySelector = ($$$)' -- apps/mocksi-lite/commands/Command.ts
Length of output: 120
Script:
#!/bin/bash
# Search for the `buildQuerySelector` function within `apps/mocksi-lite/commands/Command.ts` using `rg`.
rg 'buildQuerySelector' apps/mocksi-lite/commands/Command.ts
Length of output: 96
Script:
#!/bin/bash
# Fetch the full implementation of the `buildQuerySelector` function in `apps/mocksi-lite/commands/Command.ts`.
sed -n '/export const buildQuerySelector = (/,/^}/p' apps/mocksi-lite/commands/Command.ts
Length of output: 555
| export const loadPreviousModifications = () => { | ||
| const modifications: DOMModificationsType = getModificationsFromStorage(); | ||
| for (const modification of Object.entries(modifications)) { | ||
| const [querySelector, { previousText }] = modification; | ||
| modifyElementInnerHTML(querySelector, previousText); | ||
| // value here is encoded, SHOULD NOT be a security risk to put it in the innerHTML | ||
| const [querySelector, { previousText, nextText }] = modification; | ||
| // here newText and previous is in altered order because we want to revert the changes | ||
| modifyElementInnerHTML(querySelector, nextText, previousText); |
There was a problem hiding this comment.
Tip
Codebase Verification
Ensure that the modifyElementInnerHTML function is called with properly sanitized inputs to prevent XSS attacks.
- In
apps/mocksi-lite/utils.ts, thegetModificationsFromStoragefunction retrieves data fromlocalStoragewithout sanitization. - The
alterationsobject inapps/mocksi-lite/content/Popup/CreateDemo/DemoItem.tsxis passed toloadAlterationswithout sanitization.
Please review and ensure that the inputs to modifyElementInnerHTML are sanitized to prevent potential XSS vulnerabilities.
Analysis chain
Ensure that the modifyElementInnerHTML function is called with properly sanitized inputs to prevent XSS attacks.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify that inputs to `modifyElementInnerHTML` are sanitized.
# Test: Search for all calls to `modifyElementInnerHTML` and check for input sanitization.
rg --type python $'modifyElementInnerHTML'
Length of output: 72
Script:
#!/bin/bash
# Description: Verify that inputs to `modifyElementInnerHTML` are sanitized.
# Test: Search for all calls to `modifyElementInnerHTML` in TypeScript or JavaScript files.
rg --type js --type ts 'modifyElementInnerHTML'
Length of output: 282
Script:
#!/bin/bash
# Description: Extract and display the context around the calls to `modifyElementInnerHTML` to verify input sanitization.
# Display the context around each call to `modifyElementInnerHTML` in `apps/mocksi-lite/utils.ts`.
rg --type js --type ts 'modifyElementInnerHTML' -A 3 -B 3
Length of output: 1253
Script:
#!/bin/bash
# Description: Identify the definitions and assignments of `alteration` and `modification` objects in `apps/mocksi-lite/utils.ts`.
# Search for the definitions and assignments of `alteration`.
rg --type js --type ts 'alteration' apps/mocksi-lite/utils.ts
# Search for the definitions and assignments of `modification`.
rg --type js --type ts 'modification' apps/mocksi-lite/utils.ts
Length of output: 801
Script:
#!/bin/bash
# Description: Verify the sanitization of `alterations` and `modifications`.
# Search for the definition of `getModificationsFromStorage`.
rg --type js --type ts 'function getModificationsFromStorage'
# Search for the source of `alterations`.
rg --type js --type ts 'alterations ='
Length of output: 104
Script:
#!/bin/bash
# Description: Verify the sanitization of `alterations` and `modifications` by examining their imports and declarations.
# Search for import statements related to `getModificationsFromStorage`.
rg --type js --type ts 'getModificationsFromStorage' --glob '!node_modules/**' --glob '!.git/**' --glob '!dist/**'
# Search for variable declarations related to `alterations`.
rg --type js --type ts 'alterations' --glob '!node_modules/**' --glob '!.git/**' --glob '!dist/**'
Length of output: 1118
Script:
#!/bin/bash
# Description: Inspect the `getModificationsFromStorage` function and the context around `alterations`.
# Extract the `getModificationsFromStorage` function.
rg --type js --type ts 'const getModificationsFromStorage = ' -A 10 apps/mocksi-lite/utils.ts
# Inspect the context around `alterations` in `apps/mocksi-lite/content/Popup/CreateDemo/DemoItem.tsx`.
rg --type js --type ts 'alterations' -A 5 -B 5 apps/mocksi-lite/content/Popup/CreateDemo/DemoItem.tsx
# Inspect the context around `alterations` in `apps/mocksi-lite/background.ts`.
rg --type js --type ts 'alterations' -A 5 -B 5 apps/mocksi-lite/background.ts
Length of output: 1269
| const blockNodes = () => { | ||
| const aElements = document.querySelectorAll("a"); | ||
| const buttonElements = document.querySelectorAll("button"); | ||
| for (const clickableElement of [...aElements, ...buttonElements]) { | ||
| //@ts-ignore | ||
| const { href, className, style, onclick } = clickableElement; | ||
| blockedNodes.push({ href, className, onclick, style: { ...style } }); | ||
| //@ts-ignore | ||
| clickableElement.href = ""; | ||
| clickableElement.style.cursor = "text"; | ||
| clickableElement.onclick = (event) => { | ||
| event.stopPropagation(); | ||
| event.preventDefault(); | ||
| console.log("BLOCKED!"); | ||
| }; | ||
| } | ||
| }; |
There was a problem hiding this comment.
Refactor the blockNodes function to improve readability and maintainability. Consider using more descriptive variable names and reducing the use of @ts-ignore.
- const aElements = document.querySelectorAll("a");
- const buttonElements = document.querySelectorAll("button");
- for (const clickableElement of [...aElements, ...buttonElements]) {
- //@ts-ignore
- const { href, className, style, onclick } = clickableElement;
- blockedNodes.push({ href, className, onclick, style: { ...style } });
- //@ts-ignore
- clickableElement.href = "";
- clickableElement.style.cursor = "text";
- clickableElement.onclick = (event) => {
- event.stopPropagation();
- event.preventDefault();
- console.log("BLOCKED!");
- };
- }
+ blockClickableElements([...document.querySelectorAll("a, button")]);
+ function blockClickableElements(elements) {
+ elements.forEach(element => {
+ const { href, className, style, onclick } = element;
+ blockedNodes.push({ href, className, onclick, style: { ...style } });
+ element.href = "";
+ element.style.cursor = "text";
+ element.onclick = (event) => {
+ event.stopPropagation();
+ event.preventDefault();
+ console.log("BLOCKED!");
+ };
+ });
+ }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. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const blockNodes = () => { | |
| const aElements = document.querySelectorAll("a"); | |
| const buttonElements = document.querySelectorAll("button"); | |
| for (const clickableElement of [...aElements, ...buttonElements]) { | |
| //@ts-ignore | |
| const { href, className, style, onclick } = clickableElement; | |
| blockedNodes.push({ href, className, onclick, style: { ...style } }); | |
| //@ts-ignore | |
| clickableElement.href = ""; | |
| clickableElement.style.cursor = "text"; | |
| clickableElement.onclick = (event) => { | |
| event.stopPropagation(); | |
| event.preventDefault(); | |
| console.log("BLOCKED!"); | |
| }; | |
| } | |
| }; | |
| const blockNodes = () => { | |
| blockClickableElements([...document.querySelectorAll("a, button")]); | |
| }; | |
| function blockClickableElements(elements) { | |
| elements.forEach(element => { | |
| const { href, className, style, onclick } = element; | |
| blockedNodes.push({ href, className, onclick, style: { ...style } }); | |
| element.href = ""; | |
| element.style.cursor = "text"; | |
| element.onclick = (event) => { | |
| event.stopPropagation(); | |
| event.preventDefault(); | |
| console.log("BLOCKED!"); | |
| }; | |
| }); | |
| } |
|
Closing. |
TODO:
[Happiest path ever]
https://github.com/Mocksi/HARlighter/assets/67698200/9ff756d5-6762-42a8-91f2-a6dcead06d38
[Here's what I mention about adjusting the positions.]
https://github.com/Mocksi/HARlighter/assets/67698200/b4e440fe-1901-40c6-8861-d3a5fe82c396
Summary by CodeRabbit
New Features
Refactor
Chores
MOCKSI_HIGHLIGHTER_IDconstant for highlighter tool identification.