{"id":23176777,"url":"https://github.com/ryanlarge13/text-editor-js","last_synced_at":"2025-04-05T01:24:34.856Z","repository":{"id":221773148,"uuid":"755345377","full_name":"RyanLarge13/Text-Editor-JS","owner":"RyanLarge13","description":"Text editor with JavaScript (no libraries) using a gap buffer data structure for complete customization. (no mobile phone support 😕) ","archived":false,"fork":false,"pushed_at":"2024-10-18T23:24:57.000Z","size":415,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-04T09:41:39.967Z","etag":null,"topics":["gap-buffers","javascript","oop"],"latest_commit_sha":null,"homepage":"https://ryanlarge13.github.io/Text-Editor-JS/","language":"JavaScript","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/RyanLarge13.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":"2024-02-09T23:44:27.000Z","updated_at":"2024-11-14T19:06:56.000Z","dependencies_parsed_at":"2024-05-21T20:49:05.510Z","dependency_job_id":"40e0ffa7-feb2-41f4-ad25-4ffc2a0d0e1e","html_url":"https://github.com/RyanLarge13/Text-Editor-JS","commit_stats":null,"previous_names":["ryanlarge13/text-editor-js"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanLarge13%2FText-Editor-JS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanLarge13%2FText-Editor-JS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanLarge13%2FText-Editor-JS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanLarge13%2FText-Editor-JS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RyanLarge13","download_url":"https://codeload.github.com/RyanLarge13/Text-Editor-JS/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247273461,"owners_count":20911934,"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":["gap-buffers","javascript","oop"],"created_at":"2024-12-18T06:19:33.274Z","updated_at":"2025-04-05T01:24:34.835Z","avatar_url":"https://github.com/RyanLarge13.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Text Editor JS\n\n\u003cimg src=\"/assets/logo.png\" alt=\"logo\" /\u003e\n\n## Table of contents\n\n[Overview](#overview)\n\n- [Toolbar Class](#toolbar-class)\n- [Editor Class](#editor-class)\n- [Buffer Class](#buffer-class)\n\n[Run The App](#run-the-app)\n\n- [Live Server Install](#live-server-install)\n- [Cloning Repo](#cloning-repo)\n\n \u003cimg src=\"/assets/Text-Editor-JS.png\" alt=\"app logo\" /\u003e\n\nWelcome! I want to start by giving a brief intro to this project and why I chose to make it.\nI realized as my journey through learning how to write software progressed that I was getting\nquite tired of hearing advice to NOT re-invent the wheel.\n\nI grew tired of this advice because simply most libraries do not provide the customization and\nutility that I desired. This commonly reoccurring issue was most prevalent in web based text editors.\n\nMost rich text editor libraries do a great job at making out lives easier even in the most\ncomplicated and feature heavy utility apps. But this sometimes comes with hours upon hours of\nreading through documentation, sweating through the errors and incompatibilities, deprecation warnings\netc... I figured there is nothing wrong with reinventing the wheel for two big reasons.\n\n1. Learning\n2. Customization\n\nNo matter how many struggles I might run into throughout this application I know I am gaining experience and\nknowledge as a software engineer far more valuable and important that library specific knowledge\n\nI also know that if there is some feature I would like to add or a look I would like to change, I have the power and the\ntools to do so with ease and a solid understanding behind my own code base. Also it is free. Although most libraries are free to\nuse anyway even the pay to use libraries have a free version, but still.\n\nAnyway. Thank you for reading. let's dive into this project\n\n## Overview\n\nText editor js is a text editor application for desktop built on the web and written in JavaScript.\nThis text editor leverages the power of gap buffers to render/edit/format text. No text inputs\nor text areas are used in this application. Just a fancy tool bar and a plain div to represent the paper.\n\nLogic is separated into 3 main classes\n\n1. Toolbar class\n2. Editor class\n3. Buffer class\n\neach of these classes modulates and separates concern of the main processes of the application\n\n### Toolbar Class\n\nThe toolbar class handles very little functionality covering UI more than anything such as\nupdating the active state of the button when a specific style or format is selected\n\n### Editor Class\n\nThe editor class is a mediatory class that helps the main script communicate with specific gap buffers, handles dom manipulation,\nstyle and formatting updates to the text\n\n### Buffer class\n\nThe buffer class is the heart of performance in this application. It handles all of the logic for manipulating the text being rendered by inserting\nand removing text characters and positioning the cursor within the text. Multiple buffers are assigned within the application as the user types depending\non the formatting and styling they create. The application tries to balance the number of gap buffers for manipulating and rendering text within the application\nbut also not allowing a single buffer to get too large as to mitigate against costly array operations especially when the buffer needs to grow in size and copy its elements\n\n## Run the app\n\nThis project is 100% vanilla js. To run the application it is as simple as cloning the repo and pull the files into the browser. Or use live server if you are using VS Code.\n\nFont Awesome icons are used to display the toolbar icons within the app. Please, create your own Font Awesome account for free here\n[Font Awesome](https://fontawesome.com/)\nand past your personal url for the script link in index.html so I can keep this app going on gh-pages.\n\n```\nindex.html\n\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\" /\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n  \u003cmeta name=\"description\" content=\"text editor with vanilla js\" /\u003e\n  \u003clink rel=\"stylesheet\" href=\"style.css\" /\u003e\n  \u003cscript type=\"module\" src=\"./js/script.js\"\u003e\u003c/script\u003e\n\n  \u003c-- Change this script tag --\u003e\n  \u003cscript src=\"https://kit.fontawesome.com/a673862905.js\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n  \u003ctitle\u003eText Editor\u003c/title\u003e\n\u003c/head\u003e\n```\n\n### Live Server Install\n\n[Install Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)\n\n### Cloning Repo\n\n```\ngit clone git@github.com/RyanLarge13/Text-Editor-JS.git\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanlarge13%2Ftext-editor-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryanlarge13%2Ftext-editor-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanlarge13%2Ftext-editor-js/lists"}