{"id":16721529,"url":"https://github.com/jdormit/remington","last_synced_at":"2025-03-15T12:24:23.904Z","repository":{"id":72492309,"uuid":"72382755","full_name":"jdormit/remington","owner":"jdormit","description":"Text editing data layer for the web","archived":false,"fork":false,"pushed_at":"2016-11-16T18:29:43.000Z","size":165,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-22T02:45:59.181Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/jdormit.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license.md","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":"2016-10-30T23:50:37.000Z","updated_at":"2016-11-06T23:19:43.000Z","dependencies_parsed_at":"2023-02-28T20:15:25.547Z","dependency_job_id":null,"html_url":"https://github.com/jdormit/remington","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdormit%2Fremington","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdormit%2Fremington/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdormit%2Fremington/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdormit%2Fremington/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jdormit","download_url":"https://codeload.github.com/jdormit/remington/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243727740,"owners_count":20338080,"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":[],"created_at":"2024-10-12T22:31:04.741Z","updated_at":"2025-03-15T12:24:23.886Z","avatar_url":"https://github.com/jdormit.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Remington.js\n## Text editing for the Web\n\n`Remington` is a text editing library. It translates keyboard input to text with a cross-browser, easy-to-use API, and it tracks cursor location. `Remington` plays nicely with view-layer libraries like [React](https://reactjs.org) and [Vue](https://vuejs.org).\n\n`Remington` is not a full text editor. It handles input and stores the text in memory; it does not have any opinions on how the data should be rendered or persisted.\n\n## Installation\nDownload [`remington.js`](https://jdormit.github.io/remington/remington.js) or (minified) [`remington.min.js`](https://jdormit.github.io/remington/remington.min.js).\n\n`Remington` is also available on NPM:\n\n`npm install remington`\n\n## Getting Started\n```javascript\n// You can attach a Remington instance to any element, as long as it is focusable.\n// To make (say) a \u003cdiv\u003e focusable, give it a tabindex, e.g. \u003cdiv tabindex=\"1\"\u003e\u003c/div\u003e\nvar myElement = document.getElementById('myElement');\nvar writer = new Remington(myElement);\n\n// Now KeyboardEvents emitted by myElement will be caught and processed by Remington\n```\n## The Remington Instance\n### `Remington(element, initialText, inputCallback)`\nThe Remington constructor. This is the default export of the Remington package.\n\n```javascript\nvar writer = new Remington(myElement);\n```\n\n#### Arguments\n`element {Element}`: The DOM element to which to attach this Remington instance. This can be `null` or `undefined`; if it is, then no event listeners will be registered. In that case, the only way to modify the buffer is through the Remington instance methods.\n\n`initialText {String}`: Optional. This text will start in the Remington instance's buffer.\n\n`inputCallback {Function}`: Optional. The function is called whenever the Remington instance detects input. It is called once per character inputted.\n\nThe input callback takes one argument, `inputEvent`. The `inputEvent` is the KeyboardEvent object representing the input. `inputEvent` also includes two additional properties: `oldCursor` and `cursor`. `oldCursor` is the cursor object before the input was processed; `cursor` is the cursor after the input was processed.\n\n#### Returns\nA new `Remington` instance.\n\n### Methods\n#### `writer.getBuffer()`\nReturns this Remington instance's buffer. The buffer is stored as an array of strings, where each string is a row of text.\n\n#### `writer.getBufferText()`\nReturns a string representation of the instance's buffer. This is computationally expensive, so `writer.getBuffer()` is preferred unless a string representation is absolutely necessary.\n\n#### `writer.setBufferText(text)`\nSets this instance's buffer text to `text`. The text is broken into rows based on newlines.\n\n##### Arguments\n`text {String}`: The text to set the buffer to.\n\n#### `writer.sendInput(input)`\nSends input, either a single character or a keycode, to the Remington instance.\n\n##### Arguments\n`input {String|Number}`: If a string, then this must be a single character to send to the Remington buffer. If a number, this must be a valid keycode that Remington knows how to handle.\n\n##### Return Value\n`true` if the Remington instance properly handled the input; `false` if otherwise.\n\n#### `writer.getCursor()`\nThis returns the `Object` representing this instance's cursor.\n```javascript\ncursor = {\n    row: Number,\n    col: Number\n}\n```\n#### `writer.setCursor(col, row)`\nThis sets the cursor position to (`col`, `row`).\n\n##### Arguments\n`col`: The cursor's new column position.\n\n`row`: The cursor's new row position.\n\n## Example Usage\nThis is a *very hacky* example of usage, shown only to introduce the library. For production use, a view-layer framework like React or Vue is recommended for rendering the buffer and cursor.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n    \u003chead\u003e\n        \u003cscript type=\"text/javascript\" src=\"remington.js\"\u003e\u003c/script\u003e\n        \u003cstyle\u003e\n         #editorDiv {\n             width: 500px;\n             height: 750px;\n             border: 1px solid black;\n             white-space: pre;\n         }\n         #cursor {\n             position: absolute;\n             border-left: 1px solid black;\n             background: transparent;\n             width: 1em;\n         }\n         #sizeCalculator {\n             white-space: pre;\n             position: absolute;\n             opacity: 0;\n         }\n        \u003c/style\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n        \u003cspan id=\"sizeCalculator\"\u003e\u003c/span\u003e\n        \u003cdiv id=\"editorDiv\" tabindex=\"1\"\u003e\u003c/div\u003e\n        \u003cscript type=\"text/javascript\"\u003e\n         var editorDiv = document.getElementById('editorDiv');\n         var writer = new Remington(editorDiv, function(inputEvent) {\n             // Render the buffer\n             editorDiv.innerHTML = \"\";\n             for (i in writer.getBuffer()) {\n                 var row = writer.getBuffer()[i];\n                 var rowDiv = document.createElement('div'); \n                 rowDiv.id = i;\n                 var rowText = document.createTextNode(row);\n                 rowDiv.appendChild(rowText);\n                 editorDiv.appendChild(rowDiv);\n             }\n             // Render the cursor\n             var lineHeight = lineHeight || document.getElementById(0).offsetHeight;\n             var cursorDiv = document.createElement('div');\n             cursorDiv.id = \"cursor\";\n             cursorDiv.style.height = lineHeight - 2 + \"px\";\n             // Calculate the height offset\n             var sizeCalculator = document.getElementById(\"sizeCalculator\");\n             var textToCursor = \"\";\n             for (var i = 0; i \u003c writer.getCursor().row; i++) {\n                 var rowText = document.getElementById(i).innerText;\n                 textToCursor += rowText;\n             }\n             sizeCalculator.innerText = textToCursor;\n             cursorDiv.style.top = sizeCalculator.offsetHeight + 9 + \"px\";\n             // Calculate the width offset\n             textToCursor = \"\";\n             for (var i = 0; i \u003c writer.getCursor().col; i++) {\n                 var char = document.getElementById(writer.getCursor().row).innerText[i];\n                 textToCursor += char;\n             }\n             sizeCalculator.innerText = textToCursor;\n             var leftPos = sizeCalculator.offsetWidth + 9;\n             cursorDiv.style.left = leftPos + \"px\";\n             editorDiv.appendChild(cursorDiv);\n         });\n         // Hacky blinking cursor\n         var visible = true;\n         setInterval(function() {\n             var cursorDiv = document.getElementById('cursor');\n             if (!cursorDiv) return;\n             if (visible) {\n                 visible = false;\n                 cursorDiv.style.opacity = 0;\n             } else {\n                 visible = true;\n                 cursorDiv.style.opacity = 100;\n             }\n         }, 500);\n        \u003c/script\u003e\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## License\n`Remington` is provided under the MIT license. See [`license.md`](./license.md) for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjdormit%2Fremington","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjdormit%2Fremington","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjdormit%2Fremington/lists"}