This repository has been archived by the owner on Sep 26, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* hookup-reactor * add reactor alias for vite * inject @repo/reactor to mocksi-lite-next * Update reactor to ESM * remove alias * cleanup * formatting --------- Co-authored-by: Kayla Fitzsimmons <[email protected]> Co-authored-by: Jonathan Kaplan <[email protected]>
- Loading branch information
3 people
authored
Aug 21, 2024
1 parent
993e588
commit 89061ce
Showing
16 changed files
with
469 additions
and
254 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,132 @@ | ||
| import { v4 as uuidv4 } from "uuid"; | ||
|
|
||
| const MOCKSI_HIGHLIGHTER_ID = "mocksi-highlighter"; | ||
|
|
||
| class Highlighter { | ||
| private contentRanger = document.createRange(); | ||
| private highlightedNodes: { highlightedElem: Node; highlightId: string }[] = | ||
| []; | ||
|
|
||
| highlightNode = (elementToHighlight: Node) => { | ||
| this.contentRanger.selectNodeContents(elementToHighlight); | ||
| const { height, width, x, y } = | ||
| this.contentRanger.getBoundingClientRect() || {}; | ||
| const textHighlight = highlight({ | ||
| height, | ||
| highlightedElement: elementToHighlight, | ||
| width, | ||
| x, | ||
| y, | ||
| }); | ||
| textHighlight.id = uuidv4(); | ||
| document.body.appendChild(textHighlight); | ||
| //@ts-ignore just don't know what is meaning here | ||
| this.highlightedNodes.push({ | ||
| highlightId: textHighlight.id, | ||
| highlightedElem: elementToHighlight, | ||
| }); | ||
| }; | ||
|
|
||
| removeHighlightNode = (elementToUnhighlight: Node) => { | ||
| const { highlightId } = | ||
| this.highlightedNodes.find( | ||
| ({ highlightedElem }) => highlightedElem === elementToUnhighlight, | ||
| ) || {}; | ||
| if (highlightId) { | ||
| const highlightDOMElem = document.getElementById(highlightId); | ||
| highlightDOMElem?.remove(); | ||
| } | ||
| }; | ||
|
|
||
| showHideHighlight = (show: boolean, elementInvolved: Node) => { | ||
| const { highlightId } = | ||
| this.highlightedNodes.find( | ||
| ({ highlightedElem }) => highlightedElem === elementInvolved, | ||
| ) || {}; | ||
| if (highlightId) { | ||
| const highlightDOMElem = document.getElementById(highlightId); | ||
| (highlightDOMElem as HTMLElement).style.display = show ? "block" : "none"; | ||
| } | ||
| }; | ||
|
|
||
| showHideHighlights = (show: boolean) => { | ||
| for (const node of document.querySelectorAll( | ||
| `div.${MOCKSI_HIGHLIGHTER_ID}`, | ||
| )) { | ||
| (node as HTMLElement).style.display = show ? "block" : "none"; | ||
| } | ||
| }; | ||
|
|
||
| removeHighlightNodes = () => { | ||
| for (const node of document.querySelectorAll( | ||
| `div.${MOCKSI_HIGHLIGHTER_ID}`, | ||
| )) { | ||
| (node as HTMLElement).remove(); | ||
| } | ||
| }; | ||
| } | ||
|
|
||
| let ContentHighlighter: Highlighter; | ||
|
|
||
| export const getHighlighter = () => { | ||
| if (!ContentHighlighter) { | ||
| ContentHighlighter = new Highlighter(); | ||
| } | ||
| return ContentHighlighter; | ||
| }; | ||
|
|
||
| const createHighlighterStyles = ( | ||
| width: number, | ||
| height: number, | ||
| x: number, | ||
| y: number, | ||
| scrollY: number, | ||
| scrollX: number, | ||
| ) => ({ | ||
| background: "rgba(229, 111, 12, 0.05)", | ||
| border: "2px solid #FFB68B", | ||
| cursor: "text", | ||
| height: `${height}px`, | ||
| left: `${window.scrollX + x + -2}px`, | ||
| pointerEvents: "none", | ||
| position: "absolute", | ||
| top: `${window.scrollY + y + -2}px`, | ||
| width: `${width}px`, | ||
| zIndex: "999", | ||
| }); | ||
|
|
||
| const highlight = ({ | ||
| height, | ||
| highlightedElement, | ||
| width, | ||
| x, | ||
| y, | ||
| }: { | ||
| height: number; | ||
| highlightedElement: Node; | ||
| width: number; | ||
| x: number; | ||
| y: number; | ||
| }) => { | ||
| const highlighterStyles = createHighlighterStyles( | ||
| width, | ||
| height, | ||
| x, | ||
| y, | ||
| window.scrollY, | ||
| window.scrollX, | ||
| ); | ||
| const highlightDiv = document.createElement("div"); | ||
| highlightDiv.className = MOCKSI_HIGHLIGHTER_ID; | ||
|
|
||
| highlightDiv.ondblclick = (event: MouseEvent) => { | ||
| if (!highlightedElement?.parentElement) { | ||
| return; | ||
| } | ||
| (event.target as HTMLElement).style.display = "none"; | ||
| // TODO: Come back to handle double clicking on a highlight | ||
| document.getElementById("mocksiTextArea")?.focus(); | ||
| event.stopPropagation(); | ||
| }; | ||
| return highlightDiv; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,44 @@ | ||
| { | ||
| "compilerOptions": { | ||
| "target": "esnext", | ||
| "types": ["vite/client", "node", "chrome"], | ||
| "lib": ["dom", "dom.iterable", "esnext"], | ||
| "allowJs": false, | ||
| "skipLibCheck": true, | ||
| "esModuleInterop": true, | ||
| "allowSyntheticDefaultImports": true, | ||
| "strict": true, | ||
| "baseUrl": ".", | ||
| "esModuleInterop": true, | ||
| "forceConsistentCasingInFileNames": true, | ||
| "noFallthroughCasesInSwitch": true, | ||
| "jsx": "react-jsx", | ||
| "lib": [ | ||
| "dom", | ||
| "dom.iterable", | ||
| "esnext" | ||
| ], | ||
| "module": "esnext", | ||
| "moduleResolution": "node", | ||
| "resolveJsonModule": true, | ||
| "noEmit": true, | ||
| "jsx": "react-jsx", | ||
| "baseUrl": ".", | ||
| "noFallthroughCasesInSwitch": true, | ||
| "paths": { | ||
| "@src/*": ["src/*"], | ||
| "@assets/*": ["src/assets/*"], | ||
| "@pages/*": ["src/pages/*"] | ||
| } | ||
| "@assets/*": [ | ||
| "src/assets/*" | ||
| ], | ||
| "@pages/*": [ | ||
| "src/pages/*" | ||
| ], | ||
| "@src/*": [ | ||
| "src/*" | ||
| ] | ||
| }, | ||
| "resolveJsonModule": true, | ||
| "skipLibCheck": true, | ||
| "strict": true, | ||
| "target": "esnext", | ||
| "types": [ | ||
| "vite/client", | ||
| "node", | ||
| "chrome" | ||
| ] | ||
| }, | ||
| "include": ["src", | ||
| "utils", "vite.config.ts"], | ||
| } | ||
| "include": [ | ||
| "src", | ||
| "utils", | ||
| "vite.config.ts" | ||
| ], | ||
| } |
Oops, something went wrong.