{"id":26660628,"url":"https://github.com/codevideo/codevideo-virtual-editor","last_synced_at":"2025-04-11T16:13:22.907Z","repository":{"id":228058548,"uuid":"771421339","full_name":"codevideo/codevideo-virtual-editor","owner":"codevideo","description":"TypeScript class that simulates a single code buffer.","archived":false,"fork":false,"pushed_at":"2025-04-02T11:25:16.000Z","size":332,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-02T12:28:54.641Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://codevideo.io","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/codevideo.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-03-13T09:16:02.000Z","updated_at":"2025-04-02T11:25:20.000Z","dependencies_parsed_at":"2024-03-16T20:51:43.124Z","dependency_job_id":"3c98ac43-261a-4740-90c3-51cb9f79cb16","html_url":"https://github.com/codevideo/codevideo-virtual-editor","commit_stats":null,"previous_names":["codevideo/virtual-code-block","codevideo/codevideo-virtual-code-block","codevideo/codevideo-virtual-editor"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codevideo%2Fcodevideo-virtual-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codevideo%2Fcodevideo-virtual-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codevideo%2Fcodevideo-virtual-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codevideo%2Fcodevideo-virtual-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codevideo","download_url":"https://codeload.github.com/codevideo/codevideo-virtual-editor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248438513,"owners_count":21103410,"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":"2025-03-25T12:18:50.027Z","updated_at":"2025-04-11T16:13:22.889Z","avatar_url":"https://github.com/codevideo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @fullstackcraft/codevideo-virtual-editor\n\n![NPM Version](https://img.shields.io/npm/v/@fullstackcraftllc/codevideo-virtual-editor)\n\n`codevideo-virtual-editor` is a TypeScript class that simulates a code editor environment with features like cursor navigation, text insertion, and line manipulation. It provides a flexible interface for applying various code editing actions such as typing, moving the cursor, and executing commands. This lightweight and versatile library is ideal for building educational tools, code playgrounds, and interactive coding environments within web applications.\n\nThis library heavily relys on the types from [codevideo-types](https://github.com/codevideo/codevideo-types)\n\n## Example Usage\n\n```typescript\nimport { VirtualEditor } from '@fullstackcraftllc/codevideo-virtual-editor';\n\n// Initialize a VirtualEditor instance with initial code lines\nconst initialCodeLines = [\n  'function greet(name) {',\n  '    return \"Hello, \" + name + \"!\";',\n '}'\n];\nconst virtualEditor = new VirtualEditor(initialCodeLines);\n\n// Apply code editing actions\nvirtualEditor.applyActions([\n  { name: 'arrow-down', value: '1' },  // Move cursor down one time\n  { name: 'arrow-right', value: '13' }, // Move cursor right 13 times\n  { name: 'type-editor', value: 'world' }, // Type 'world'\n  { name: 'space', value: '1' }, // Insert space\n  { name: 'type-text', value: '😊' } // Type emoji\n]);\n\n// Get the final code and actions applied\nconst finalCode = virtualEditor.getCode();\nconst actionsApplied = virtualEditor.getActionsApplied();\n\n// Log the final code and actions applied\nconsole.log('Final code:');\nconsole.log(finalCode);\nconsole.log('Actions applied:');\nconsole.log(actionsApplied);\n```\n\n## Available Methods\n\n### `applyAction(action: IAction): void`\n\nApply a single action to the code.\n\n### `applyActions(actions: Array\u003cIAction\u003e): string`\n\nApply a series of actions to the code. Returns the final code as a string.\n\n### `getCurrentCode(): Array\u003cstring\u003e`\n\nGet the current code lines.\n\n### `getCurrentCaretPosition(): { row: number; column: number }`\n\nGet the current caret position.\n\n### `getActionsApplied(): Array\u003cIAction\u003e`\n\nGet the actions that were applied to the code.\n\n### `getCode(): string`\n\nGet the code as a single string.\n\n### `getCodeLinesHistory(): Array\u003cArray\u003cstring\u003e\u003e`\n\nGet the history of code lines.\n\n### `getCodeAfterEachStep(): Array\u003cstring\u003e`\n\nGet the code after each step.\n\n### `getEditorStateAfterEachStep(): Array\u003c{ code: string; caretPosition: { row: number; col: number } }\u003e`\n\nGet the editor state after each step.\n\n### `getDataForAnnotatedFrames(): Array\u003c{ actionApplied: IAction; code: string; caretPosition: { row: number; col: number }; speechCaptions: Array\u003cISpeechCaption\u003e; }\u003e`\n\nGet data for annotated frames.\n\n## Why?\n\nWhy do we need a seemingly useless class? This library, along with [`codevideo-virtual-terminal`](https://github.com/codevideo/codevideo-virtual-terminal) create the backbone of [`codevideo-virtual-code-editor`](https://github.com/codevideo/codevideo-virtual-code-editor) which are used to validate steps across the CodeVideo ecosystem. This is a small part of a larger project to create a declarative way to build, edit, and generate step by step educational video software courses.\n\nSee more at [codevideo.io](https://codevideo.io)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodevideo%2Fcodevideo-virtual-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodevideo%2Fcodevideo-virtual-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodevideo%2Fcodevideo-virtual-editor/lists"}