{"id":25440466,"url":"https://github.com/skaplanofficial/clickable-detail","last_synced_at":"2025-11-01T11:30:25.998Z","repository":{"id":184213231,"uuid":"647123693","full_name":"SKaplanOfficial/Clickable-Detail","owner":"SKaplanOfficial","description":"A customized Detail component for Raycast that enables interaction via mouse clicks","archived":false,"fork":false,"pushed_at":"2023-05-30T05:40:21.000Z","size":727,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-10T19:41:07.862Z","etag":null,"topics":["jxa","mac","macos","node","nodejs","raycast"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SKaplanOfficial.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-05-30T05:40:19.000Z","updated_at":"2024-12-19T05:45:56.000Z","dependencies_parsed_at":"2023-07-27T14:30:53.080Z","dependency_job_id":null,"html_url":"https://github.com/SKaplanOfficial/Clickable-Detail","commit_stats":null,"previous_names":["skaplanofficial/clickable-detail"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SKaplanOfficial%2FClickable-Detail","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SKaplanOfficial%2FClickable-Detail/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SKaplanOfficial%2FClickable-Detail/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SKaplanOfficial%2FClickable-Detail/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SKaplanOfficial","download_url":"https://codeload.github.com/SKaplanOfficial/Clickable-Detail/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239285579,"owners_count":19613677,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jxa","mac","macos","node","nodejs","raycast"],"created_at":"2025-02-17T11:36:50.887Z","updated_at":"2025-11-01T11:30:25.927Z","avatar_url":"https://github.com/SKaplanOfficial.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# clickable-detail\n\nA customized Detail component for Raycast that enables interaction via mouse clicks.\n\n![ClickableDetail](./assets/example.png)\n\n## Installation\n\n```bash\nnpm install clickable-detail\n```\n\n\u003e Upon install, the package will automatically add two `.scpt` scripts to your extension's `assets` folder, i.e.:\n\u003e \n\u003e - [DetectMouseClicks](./bin/DetectMouseInput.scpt) - Used to detect mouse clicks on the Raycast window.\n\u003e - [HTML2b64](./bin/HTML2b64.scpt) - Used to convert HTML and URLs to base64-encoded PNG strings.\n\u003e\n\u003e These scripts are necessary for the package to work, but you can modify them if you wish (e.g. if you want to customize the SVG that is used to render the clickable content). Use Script Editor on your Mac to view/edit the source code.\n\n\n## Usage\n\n### Overview\n\n```tsx\nimport {\n  ClickableDetail,\n  DynamicSVG,\n  HTML,\n  INPUT,\n  Image,\n  Polygon,\n  Toggle,\n  usePreloadedImages,\n  useToggleDelegate,\n} from \"clickable-detail\";\nimport { runAppleScript } from \"run-applescript\";\n\nexport default function Command() {\n  // Preload images so they are ready to be used when the SVG is rendered\n  const images = usePreloadedImages([\"https://placeholder.pics/svg/200x100\"]);\n\n  // Delegates are used to keep track of state\n  const toggleDelegate = useToggleDelegate(false);\n\n  return (\n    \u003cClickableDetail isLoading={images.length != 1} waitUntilAllLoaded={true}\u003e\n      \u003cDynamicSVG\u003e\n        {/* High-level, stateful components provided (More to be added soon) */}\n        \u003cToggle\n          x={0}\n          y={0}\n          delegate={toggleDelegate}\n          label=\"Option 1\"\n          onClick={() =\u003e runAppleScript(`display dialog \"You toggled Option 1\"`)}\n        /\u003e\n\n        {/* Include external images */}\n        \u003cImage x={0} y={50} width={200} height={100} {...images[0]?.image.data} /\u003e\n\n        {/* Click handlers can access the (x, y) coordinate of the click */}\n        \u003cPolygon points=\"300,100 350,25 350,75 400,0\" fill=\"red\" onClick={(loc) =\u003e console.log(`Clicked at (${loc.x}, ${loc.y})`)}/\u003e\n\n        {/* Supports HTML using JSX syntax */}\n        \u003cHTML y={200}\u003e\n          \u003chead\u003e\n            {/* Supports applying styles to HTML elements */}\n            \u003cstyle type=\"text/css\"\u003e\n              {`\n                #paragraph1 {\n                  color: red;\n                }\n              `}\n            \u003c/style\u003e\n          \u003c/head\u003e\n          \u003cbody\u003e\n            {/* Use React's built-in HTML components */}\n            \u003cp id=\"paragraph1\"\u003eCan render arbitrary HTML content\u003c/p\u003e\n\n            \u003cform\u003e\n              {/* For additional functionality, use package-provided components -- just uppercase the normal tag and add, e.g., a click handler */}\n              \u003cINPUT type=\"submit\" value=\"Submit\" onClick={() =\u003e console.log(\"Submitted!\")} x={10} y={215} width={55} height={25} /\u003e\n            \u003c/form\u003e\n          \u003c/body\u003e\n        \u003c/HTML\u003e\n      \u003c/DynamicSVG\u003e\n    \u003c/ClickableDetail\u003e\n  );\n}\n```\n\nThe `ClickableDetail` component works similarly to the built-in `Detail` component, but with a few key differences:\n\n- You do not provide a `markdown` prop — it will be automatically generated from `ClickableDetail`'s children.\n- As of now, the `metadata` prop is not supported, but will be in the future.\n\n\n## How does it work?\n\nThere two two main aspects to this package:\n\n1. Rendering clickable content\n2. Listening for mouse clicks\n\nFor the first part, the `ClickableDetail` component uses a dynamically generated SVG to display content beyond what Detail normally supports. The SVG can be sourced from anywhere, but the provided [DynamicSVG](./lib/DynamicSVG.tsx), built specifically for this package, is highly recommended. It supports not just creating SVGs using JSX syntax, but also embedding HTML content, external URLs, and click handlers for SVG elements.\n\nTo enable mouse clicks, the `ClickableDetail` component uses a JXA child process to monitor mouse clicks on the Raycast window. When a click is detected, `ClickableDetail` will determine if the click was on an SVG element that has a click handler. If so, the click handler will be called.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskaplanofficial%2Fclickable-detail","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fskaplanofficial%2Fclickable-detail","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskaplanofficial%2Fclickable-detail/lists"}