{"id":16145526,"url":"https://github.com/phuocng/mirror-a-text-area","last_synced_at":"2025-07-12T02:36:03.605Z","repository":{"id":197249844,"uuid":"696786568","full_name":"phuocng/mirror-a-text-area","owner":"phuocng","description":"Enhancing user experience through text area mirroring","archived":false,"fork":false,"pushed_at":"2023-10-28T06:31:01.000Z","size":9056,"stargazers_count":79,"open_issues_count":3,"forks_count":7,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-16T22:36:19.330Z","etag":null,"topics":["dom-manipulation","javascript"],"latest_commit_sha":null,"homepage":"https://phuoc.ng/collection/mirror-a-text-area/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/phuocng.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2023-09-26T12:40:14.000Z","updated_at":"2025-03-10T16:44:58.000Z","dependencies_parsed_at":null,"dependency_job_id":"e118287a-490e-4d5d-b70d-5b6a33908087","html_url":"https://github.com/phuocng/mirror-a-text-area","commit_stats":null,"previous_names":["phuocng/mirror-a-text-area"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phuocng%2Fmirror-a-text-area","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phuocng%2Fmirror-a-text-area/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phuocng%2Fmirror-a-text-area/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phuocng%2Fmirror-a-text-area/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phuocng","download_url":"https://codeload.github.com/phuocng/mirror-a-text-area/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244280977,"owners_count":20427771,"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":["dom-manipulation","javascript"],"created_at":"2024-10-10T00:16:43.396Z","updated_at":"2025-03-18T18:30:34.842Z","avatar_url":"https://github.com/phuocng.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Mirror a text area\n\nWe have been using text areas in many web applications. However, there are many limitations when working with text area. For example, it only accept raw text value. This can be a hindrance when trying to implement advanced features such as highlighting a keyword, displaying the line numbers.\n\nThis series introduces a technique to mirror a text area element. Instead of working with the text area element directly, we create a copied element that look identical with the original text area. It's also placed at the same position as the text area. By doing this, we can enhance the user experience by allowing users to interact with the mirrored element in ways that were not possible with the original text area.\n\n-   [01: Mirror a text area for improving user experience](https://phuoc.ng/collection/mirror-a-text-area/mirror-a-text-area-for-improving-user-experience/)\n\n-   [02: Highlight keywords in a text area](https://phuoc.ng/collection/mirror-a-text-area/highlight-keywords-in-a-text-area/)\n\n![Highlight keywords in a text area](/02-highlight-keywords/highlight-keywords.png)\n\n-   [03: Display the line numbers in a text area](https://phuoc.ng/collection/mirror-a-text-area/display-the-line-numbers-in-a-text-area/)\n\n![Display the line numbers in a text area](/03-line-numbers/line-numbers.png)\n\n-   [04: Calculate the coordinates of the current cursor in a text area](https://phuoc.ng/collection/mirror-a-text-area/calculate-the-coordinates-of-the-current-cursor-in-a-text-area/)\n\n![Calculate the coordinates of the current cursor in a text area](/04-cursor-coordinates/cursor-coordinates.png)\n\n-   [05: Highlight the current line in a text area](https://phuoc.ng/collection/mirror-a-text-area/highlight-the-current-line-in-a-text-area/)\n\n![Highlight the current line in a text area](/05-highlight-current-line/highlight-current-line.png)\n\n-   [06: Create your own custom cursor in a text area](https://phuoc.ng/collection/mirror-a-text-area/create-your-own-custom-cursor-in-a-text-area/)\n\n![Create your own custom cursor in a text area](/06-custom-cursor/custom-cursor.png)\n\n-   [07: Add autocomplete to your text area](https://phuoc.ng/collection/mirror-a-text-area/add-autocomplete-to-your-text-area/)\n\n![Add autocomplete to your text area](/07-autocomplete/autocomplete.png)\n\n-   [08: Insert emojis](https://phuoc.ng/collection/mirror-a-text-area/insert-emojis/)\n\n![Insert emojis](/08-insert-emojis/insert-emojis.png)\n\n-   [09: Mention](https://phuoc.ng/collection/mirror-a-text-area/mention/)\n\n![Mention](/09-mention/mention.png)\n\n-   [10: Provide a preview of the suggestion as users type in a text area](https://phuoc.ng/collection/mirror-a-text-area/provide-a-preview-of-the-suggestion-as-users-type-in-a-text-area/)\n\n![Provide a preview of the suggestion as users type in a text area](/10-preview-suggestion/preview-suggestion.png)\n\n-   [11: Implement inline input suggestions](https://phuoc.ng/collection/mirror-a-text-area/implement-inline-input-suggestions/)\n\n![Implement inline input suggestions](/11-inline-input-suggestions/inline-input-suggestions.png)\n\n-   [12: Make a text area fit its content automatically](https://phuoc.ng/collection/mirror-a-text-area/make-a-text-area-fit-its-content-automatically/)\n\n![Make a text area fit its content automatically](/12-fit-content/fit-content.png)\n\n-   [13: Show a toolbar after selecting text in a text area](https://phuoc.ng/collection/mirror-a-text-area/show-a-toolbar-after-selecting-text-in-a-text-area/)\n\n![Show a toolbar after selecting text in a text area](/13-toolbar-selected-text/toolbar-selected-text.png)\n\n-   [14: Copy the content of an element to your clipboard](https://phuoc.ng/collection/mirror-a-text-area/copy-the-content-of-an-element-to-your-clipboard/)\n\n![Copy the content of an element to your clipboard](/14-copy-to-clipboard/copy-to-clipboard.png)\n\n-   [15: Build a simple code editor](https://phuoc.ng/collection/mirror-a-text-area/build-a-simple-code-editor/)\n\n![Build a simple code editor](/15-code-editor/code-editor.png)\n\n-   [16: Convert text links in a text area to clickable links](https://phuoc.ng/collection/mirror-a-text-area/convert-text-links-in-a-text-area-to-clickable-links/)\n\n![Convert text links in a text area to clickable links](/16-convert-text-links/convert-text-links.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphuocng%2Fmirror-a-text-area","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphuocng%2Fmirror-a-text-area","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphuocng%2Fmirror-a-text-area/lists"}