From 8893b053aa330fdeaefdf2085e2e3aa61a898f81 Mon Sep 17 00:00:00 2001 From: Alberto Cubeddu Date: Fri, 16 Aug 2024 08:45:31 +1000 Subject: [PATCH] v0.0.18 (#28) v0.0.18 --- README.md | 5 +++ contents/SelectionMenu.tsx | 17 +++++++-- lib/configurations/globalConfig.ts | 43 +++++++++++++++++++++++ options.tsx | 5 ++- options/OptionsPromptFactory.tsx | 1 - options/OptionsSettings.tsx | 55 ++++++++++++++++++++++++++++++ package.json | 3 +- pnpm-lock.yaml | 3 ++ tests/basic.spec.ts | 23 ------------- tests/fixtures.ts | 1 - tests/selectionMenu.spec.ts | 44 ++++++++++++++++++++++++ 11 files changed, 170 insertions(+), 30 deletions(-) create mode 100644 lib/configurations/globalConfig.ts create mode 100644 options/OptionsSettings.tsx create mode 100644 tests/selectionMenu.spec.ts diff --git a/README.md b/README.md index cd276ed..4c6239c 100644 --- a/README.md +++ b/README.md @@ -131,6 +131,11 @@ Move it somewhere else ASAP: # Changelog +### 0.0.18 +- SelectionMenu: Now you can choose to enable/disable +- SelectionMenu: When a key is pressed (e.g backspace for remove, or CTRL/CMD + C for copying) the menu automatically disappear + + ### 0.0.17 - Development: Integrated Playwright for testing and added a suite of automated tests diff --git a/contents/SelectionMenu.tsx b/contents/SelectionMenu.tsx index ae84e84..da9a06b 100644 --- a/contents/SelectionMenu.tsx +++ b/contents/SelectionMenu.tsx @@ -17,6 +17,9 @@ import { createCall } from "~lib/vapiOutbound" import { Storage } from "@plasmohq/storage"; import { sendToBackground } from "@plasmohq/messaging" import { adjustXYSelectionMenu, getRealXY } from "~lib/calculationXY" +import { useStorage } from "@plasmohq/storage/hook" +import { defaultGlobalConfig, setGlobalConfig } from "~lib/configurations/globalConfig" +import deepmerge from "deepmerge" const storage = new Storage(); // We enable the extension to be used in anywebsite with an http/https protocol. @@ -34,6 +37,8 @@ const SelectionMenu = () => { const [selectedText, setSelectedText] = useState("") const [menuPosition, setMenuPosition] = useState<{ x: number; y: number }>({ x: 0, y: 0 }) const [menuItems, setMenuItems] = useState([]) // Initialize with an empty array + let [config] = useStorage("globalConfig", defaultGlobalConfig) + config = deepmerge(defaultGlobalConfig, config) const handleMouseUp = useCallback((event: MouseEvent) => { // Use useCallback @@ -55,6 +60,10 @@ const SelectionMenu = () => { } }, []); + const handleKeyDown = useCallback((event: MouseEvent) => { // Use useCallback + setMenuPosition({ x: 0, y: 0 }) + }, []); + // Separate functions for handling different actions const handleCopyClipboard = async (element) => { const r = await sendToBackground({ @@ -133,6 +142,7 @@ const SelectionMenu = () => { useEffect(() => { document.addEventListener("mouseup", handleMouseUp) + document.addEventListener("keydown", handleKeyDown) const initialize = async () => { const contextConfigItems = @@ -152,14 +162,15 @@ const SelectionMenu = () => { return () => { document.removeEventListener("mouseup", handleMouseUp) + document.removeEventListener("keydown", handleKeyDown) } }, []) return ( <> - {menuPosition.x !== 0 && menuPosition.y !== 0 && ( // Check if .x and .y are not equal to 0 + {config.selectionMenu.display && menuPosition.x !== 0 && menuPosition.y !== 0 && ( // Check if .x and .y are not equal to 0
- { {menuItems.map((item) => ( handleMenuItemClick(item)}> - {item.title} + {item.title} ))} diff --git a/lib/configurations/globalConfig.ts b/lib/configurations/globalConfig.ts new file mode 100644 index 0000000..763c638 --- /dev/null +++ b/lib/configurations/globalConfig.ts @@ -0,0 +1,43 @@ +import deepmerge from "deepmerge"; +import { Storage } from "@plasmohq/storage"; +const storage = new Storage(); + +//We want to have everything as Partial (deep too) as the deepmerge will take care of matching with the default/stored configuration. +type DeepPartial = { + [P in keyof T]?: DeepPartial; +}; + +export const defaultGlobalConfig = { + selectionMenu: { + display: true, + }, +}; + +export async function getGlobalConfig() { + let storagedConfig = {}; + try { + storagedConfig = await storage.get("globalConfig"); + } catch (error) {} + return deepmerge( + {}, + defaultGlobalConfig, + storagedConfig + ) as typeof defaultGlobalConfig; +} + +export async function setGlobalConfig( + config: DeepPartial +) { + let storagedConfig: DeepPartial; + try { + storagedConfig = (await storage.get("globalConfig")) as Partial< + typeof defaultGlobalConfig + >; + } catch (error) {} + config = deepmerge< + DeepPartial, + DeepPartial + >(storagedConfig, config); + await storage.set("globalConfig", config); + return config; +} diff --git a/options.tsx b/options.tsx index 41bd268..66671aa 100644 --- a/options.tsx +++ b/options.tsx @@ -9,6 +9,7 @@ import OptionsGeneral from "~options/OptionsGeneral" import OptionsHeader from "~options/OptionsHeader" import OptionsMixtureOfAgents from "~options/OptionsMixtureOfAgents" import OptionsPromptFactory from "~options/OptionsPromptFactory" +import OptionsSettings from "~options/OptionsSettings" // ================================ // MAIN FUNCTION (OPTIONS) @@ -26,10 +27,11 @@ export default function Options() {