{"id":27120117,"url":"https://github.com/deepansumor/linkifyjs","last_synced_at":"2026-05-04T11:31:51.274Z","repository":{"id":286562429,"uuid":"961741043","full_name":"deepansumor/LinkifyJS","owner":"deepansumor","description":"A lightweight JavaScript library to turn selected text into links with a customizable tooltip UI — perfect for editors, note apps, and rich content creators.","archived":false,"fork":false,"pushed_at":"2025-04-07T06:54:51.000Z","size":34,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-07T07:34:37.593Z","etag":null,"topics":["contenteditable","javascript","linkify","open-source","rich-text","text-editor","text-selection","tooltip","vanilla-js","web-utilities"],"latest_commit_sha":null,"homepage":"https://deepansumor.github.io/LinkifyJS/","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/deepansumor.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-04-07T05:05:07.000Z","updated_at":"2025-04-07T06:54:55.000Z","dependencies_parsed_at":"2025-04-07T07:44:45.726Z","dependency_job_id":null,"html_url":"https://github.com/deepansumor/LinkifyJS","commit_stats":null,"previous_names":["deepansumor/linkifyjs"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deepansumor%2FLinkifyJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deepansumor%2FLinkifyJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deepansumor%2FLinkifyJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deepansumor%2FLinkifyJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/deepansumor","download_url":"https://codeload.github.com/deepansumor/LinkifyJS/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247631458,"owners_count":20970040,"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":["contenteditable","javascript","linkify","open-source","rich-text","text-editor","text-selection","tooltip","vanilla-js","web-utilities"],"created_at":"2025-04-07T09:52:16.293Z","updated_at":"2025-10-21T17:55:09.344Z","avatar_url":"https://github.com/deepansumor.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# LinkifyJS\n\nLinkifyJS is a lightweight JavaScript library that allows users to select text within a container and convert it into hyperlinks using a beautiful inline tooltip. It's perfect for editors, CMS platforms, documentation tools, and more.\n\n## Features\n\n✅ Intuitive text selection with tooltip-based editing  \n✅ Add or remove hyperlinks dynamically  \n✅ Fully customizable tooltip (labels, styles, classNames)  \n✅ Works with `contentEditable` elements  \n✅ Retains selection range for accurate text replacement  \n✅ Auto-adjusts tooltip position based on available space  \n✅ Automatically closes tooltip on `Escape` or outside click  \n✅ Supports `container` for tooltip attachment and `attributes` for custom link attributes  \n✅ Supports `done` callback when a hyperlink is inserted  \n\n---\n\n## Installation\n\n### Local\n```html\n\u003cscript src=\"../dist/linkify.min.js\"\u003e\u003c/script\u003e\n```\n\n### CDN\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/deepansumor/LinkifyJS@latest/dist/linkify.min.js\"\u003e\u003c/script\u003e\n```\n\n---\n\n## Usage\n\n### Basic Example\n```js\nimport LinkifyJS from './LinkifyJS';\n\nLinkifyJS.init(document.querySelector(\".editable-container\"));\n```\n\n### With Configuration\n```js\nLinkifyJS.init(document.querySelector(\".editable-container\"), {\n    labelText: \"Display Text\",\n    labelURL: \"Hyperlink URL\",\n    placeholderText: \"Enter text...\",\n    placeholderURL: \"https://example.com\",\n    attributes: {\n        target: \"_blank\",\n        rel: \"noopener noreferrer\",\n        'data-source': 'linkify'\n    },\n    container: document.querySelector(\"#custom-container\"),\n    classNames: {\n        tooltip: \"my-tooltip\",\n        input: \"my-input\",\n        label: \"my-label\",\n        submit: \"my-submit\",\n        remove: \"my-remove\"\n    },\n    styles: {\n        tooltip: { background: \"#f9f9f9\", borderColor: \"#333\" },\n        input: { fontSize: \"16px\" },\n        submit: { background: \"#2196f3\" },\n        remove: { background: \"#e91e63\" }\n    },\n    done: () =\u003e {\n        console.log(\"Link inserted!\");\n    }\n});\n```\n\n---\n\n## API Reference\n\n### `LinkifyJS.init(container: HTMLElement, config?: LinkifyConfig)`\nInitializes the LinkifyJS tooltip on a container.\n\n| Option            | Type                  | Description |\n|-------------------|-----------------------|-------------|\n| `labelText`       | `string`              | Label text for the name field |\n| `labelURL`        | `string`              | Label text for the URL field |\n| `placeholderText` | `string`              | Placeholder for name input |\n| `placeholderURL`  | `string`              | Placeholder for URL input |\n| `attributes`      | `object`              | Attributes to apply to the generated `\u003ca\u003e` tag (e.g., `{ target: \"_blank\" }`) |\n| `container`       | `HTMLElement`         | DOM element where the tooltip will be appended (defaults to `document.body`) |\n| `classNames`      | `object`              | Optional CSS classes for tooltip elements |\n| `styles`          | `object`              | Optional inline styles for tooltip elements |\n| `done`            | `function`            | Callback function called after the link is inserted |\n\n---\n\n## Tooltip Behavior\n\n- 🖱️ Appears on text selection  \n- 🔗 Detects and displays existing `\u003ca\u003e` tag data  \n- ❌ Allows hyperlink removal  \n- 🎯 Auto-positions above or below selection  \n- ⎋ Closes on `Escape` key  \n- 🖱️ Closes when clicking outside the tooltip  \n\n---\n\n## Contributing\n\n1. Fork the repo  \n2. Create a new branch (`git checkout -b feature-name`)  \n3. Commit your changes (`git commit -m \"Add feature\"`)  \n4. Push the branch (`git push origin feature-name`)  \n5. Open a Pull Request  \n\n---\n\n## License\n\nMIT License\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeepansumor%2Flinkifyjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdeepansumor%2Flinkifyjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeepansumor%2Flinkifyjs/lists"}