{"id":19683894,"url":"https://github.com/prisma/text-editors","last_synced_at":"2025-04-29T05:31:36.438Z","repository":{"id":44676368,"uuid":"388108408","full_name":"prisma/text-editors","owner":"prisma","description":null,"archived":false,"fork":false,"pushed_at":"2024-04-13T20:57:00.000Z","size":1342,"stargazers_count":75,"open_issues_count":33,"forks_count":10,"subscribers_count":8,"default_branch":"main","last_synced_at":"2024-04-14T11:00:00.324Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://qc.prisma-adp.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/prisma.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}},"created_at":"2021-07-21T12:24:30.000Z","updated_at":"2024-04-16T21:58:07.571Z","dependencies_parsed_at":"2023-12-16T09:33:30.123Z","dependency_job_id":"12ee6cad-5a41-422f-b2a8-a2f17a74595f","html_url":"https://github.com/prisma/text-editors","commit_stats":{"total_commits":226,"total_committers":5,"mean_commits":45.2,"dds":0.06194690265486724,"last_synced_commit":"d73c4b67ec0087d74228548c791ace1f06604cac"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prisma%2Ftext-editors","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prisma%2Ftext-editors/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prisma%2Ftext-editors/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prisma%2Ftext-editors/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/prisma","download_url":"https://codeload.github.com/prisma/text-editors/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224151098,"owners_count":17264436,"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-11-11T18:16:00.958Z","updated_at":"2024-11-11T18:16:01.066Z","avatar_url":"https://github.com/prisma.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @prisma/text-editors\n\n![tests](https://github.com/prisma/text-editors/actions/workflows/ci.yml/badge.svg) ![npm-version](https://badgen.net/npm/v/@prisma/text-editors)\n\nThis package exports a bunch of batteries-included code editors for Typescript, JSON, SQL \u0026 Prisma Schemas. The goal is to be a zero-configuration component that is quick to load and that you just dump into your codebase so it \"just works\".\n\n### Demo\n\nA demo of the editors is [here](https://qc.prisma-adp.vercel.app). Note that these editors were built for the [Prisma Data Platform](https://cloud.prisma.io)'s Query Console, so head over there to see them in action in a real app.\n\n### Installation\n\n```\nnpm i @prisma/text-editors\n\nyarn add @prisma/text-editors\n```\n\n### Usage\n\nThe editors are currently only exported as a React component, but support for other frameworks should be trivial to implement, since all of editor functionality is written in vanilla JS.\n\nUsage with React:\n\n```typescript\nimport React, { useState } from \"react\";\nimport { Editor } from \"@prisma/text-editors\";\n\n// ..snip\n\nconst [code, setCode] = useState(\"\");\n\nreturn \u003cEditor lang=\"ts\" value={code} onChange={setCode} /\u003e;\n```\n\nThis gives you an editor that includes Typescript syntax highlighting, typechecking, auto-complete \u0026 quickinfo on token hover.\n\n**Editor props**\n\n- `lang` (required): Controls what language the editor's `value` will be. This enables or disables certain feature, depending on the language. Currently supported languages are: Typescript (`ts`), JSON (`json`), SQL (`sql`) and Prisma Schema Language (`prisma`)\n\n- `value` (required): The text / code that will be shown in the editor. In general, it is recommended to pass in a controlled React prop here and update its value whenever the editor calls `onChange`. Changing this value directly will cause the editor to recreate its own internal state from scratch, which can be expensive.\n\n- `readonly`: Controls if the editor will allow changes to the `value`\n\n- `theme`: Controls the editor theme, Currently supported themes are `light` \u0026 `dark`\n\n- `style`: Any CSS properties passed here will be spread on to the editor container\n\n- `classNames`: Any class names pass here will be applied to the editor container\n\n- `types` (only valid when `lang=ts`): Key value pairs of additional Typescript types that will be injected into the editor lazily. The key must be the \"location\" of this types (common values are `/node_modules/your-package/index.d.ts`), and the value must be the actual types (such as `export type MyType = string`). These can be useful to fake custom imports in the editor, and affect auto-complete (among other things custom types let you do in VSCode, for example)\n\n---\n\n### Contributing\n\nPlease read through the [Wiki](https://github.com/prisma/text-editors/wiki) to learn more about how this package works, and how to contribute.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprisma%2Ftext-editors","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprisma%2Ftext-editors","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprisma%2Ftext-editors/lists"}