https://github.com/prisma/text-editors

https://github.com/prisma/text-editors

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/prisma/text-editors
• Owner: prisma
• License: apache-2.0
• Created: 2021-07-21T12:24:30.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-04-13T20:57:00.000Z (9 months ago)
• Last Synced: 2024-04-14T11:00:00.324Z (9 months ago)
• Language: TypeScript
• Homepage: https://qc.prisma-adp.vercel.app
• Size: 1.28 MB
• Stars: 75
• Watchers: 8
• Forks: 10
• Open Issues: 33
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @prisma/text-editors

![tests](https://github.com/prisma/text-editors/actions/workflows/ci.yml/badge.svg) ![npm-version](https://badgen.net/npm/v/@prisma/text-editors)

This package exports a bunch of batteries-included code editors for Typescript, JSON, SQL & 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".

### Demo

A 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.

### Installation

```

npm i @prisma/text-editors

yarn add @prisma/text-editors

```

### Usage

The 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.

Usage with React:

```typescript

import React, { useState } from "react";

import { Editor } from "@prisma/text-editors";

// ..snip

const [code, setCode] = useState("");

return ;

```

This gives you an editor that includes Typescript syntax highlighting, typechecking, auto-complete & quickinfo on token hover.

**Editor props**

- `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`)

- `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.

- `readonly`: Controls if the editor will allow changes to the `value`

- `theme`: Controls the editor theme, Currently supported themes are `light` & `dark`

- `style`: Any CSS properties passed here will be spread on to the editor container

- `classNames`: Any class names pass here will be applied to the editor container

- `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)

---

### Contributing

Please read through the [Wiki](https://github.com/prisma/text-editors/wiki) to learn more about how this package works, and how to contribute.