Skip to content

Add syntax prop to register a new syntax #85

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
mertyildiran wants to merge 5 commits into from
Closed

Add syntax prop to register a new syntax #85

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e0323a6
Add `syntax` prop to register a new syntax
mertyildiran Jan 12, 2022
6a90486
Replace `@mapbox/rehype-prism` with `rehype-prism-2`
mertyildiran Jul 27, 2022
3a2b45d
Rename package from `@uiw/react-textarea-code-editor` to `react-texta…
mertyildiran Jul 27, 2022
f560698
Bump the version
mertyildiran Jul 28, 2022
bacd8e4
Bump
mertyildiran Jul 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions .github/workflows/ci.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,10 +54,10 @@ jobs:
name: ${{ steps.create_tag.outputs.version }}
tag: ${{ steps.create_tag.outputs.version }}
body: |
[![](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-textarea-code-editor@${{steps.create_tag.outputs.versionNumber}}/file/README.md) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/@uiw/react-textarea-code-editor)](https://bundlephobia.com/result?p=@uiw/react-textarea-code-editor@${{steps.create_tag.outputs.versionNumber}})
[![](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/react-textarea-code-editor-2@${{steps.create_tag.outputs.versionNumber}}/file/README.md) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-textarea-code-editor-2)](https://bundlephobia.com/result?p=react-textarea-code-editor-2@${{steps.create_tag.outputs.versionNumber}})

```bash
npm i @uiw/react-textarea-code-editor@${{steps.create_tag.outputs.versionNumber}}
npm i react-textarea-code-editor-2@${{steps.create_tag.outputs.versionNumber}}
```

${{ steps.changelog.outputs.compareurl }}
Expand Down
19 changes: 13 additions & 6 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ React Textarea Code Editor
===
<!--rehype:style=display:none;-->

[![Build & Deploy](https://github.com/uiwjs/react-textarea-code-editor/actions/workflows/ci.yml/badge.svg)](https://github.com/uiwjs/react-textarea-code-editor/actions/workflows/ci.yml) [![Coverage Status](https://uiwjs.github.io/react-textarea-code-editor/coverage/badges.svg)](https://uiwjs.github.io/react-textarea-code-editor/coverage/lcov-report) [![Coverage Status](https://img.shields.io/npm/dm/@uiw/react-textarea-code-editor.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-textarea-code-editor) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-textarea-code-editor/file/README.md) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/@uiw/react-textarea-code-editor)](https://bundlephobia.com/package/@uiw/react-textarea-code-editor) [![npm version](https://img.shields.io/npm/v/@uiw/react-textarea-code-editor.svg)](https://www.npmjs.com/package/@uiw/react-textarea-code-editor)
[![Build & Deploy](https://github.com/uiwjs/react-textarea-code-editor/actions/workflows/ci.yml/badge.svg)](https://github.com/uiwjs/react-textarea-code-editor/actions/workflows/ci.yml) [![Coverage Status](https://uiwjs.github.io/react-textarea-code-editor/coverage/badges.svg)](https://uiwjs.github.io/react-textarea-code-editor/coverage/lcov-report) [![Coverage Status](https://img.shields.io/npm/dm/react-textarea-code-editor-2.svg?style=flat)](https://www.npmjs.com/package/react-textarea-code-editor-2) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/react-textarea-code-editor-2/file/README.md) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-textarea-code-editor-2)](https://bundlephobia.com/package/react-textarea-code-editor-2) [![npm version](https://img.shields.io/npm/v/react-textarea-code-editor-2.svg)](https://www.npmjs.com/package/react-textarea-code-editor-2)

A simple code editor with syntax highlighting. This library aims to provide a simple code editor with syntax highlighting support without any of the extra features, perfect for simple embeds and forms where users can submit code.

Expand All @@ -17,7 +17,7 @@ A simple code editor with syntax highlighting. This library aims to provide a si
## Install

```bash
$ npm i @uiw/react-textarea-code-editor
$ npm i react-textarea-code-editor-2
```

## Usage
Expand All @@ -26,7 +26,7 @@ $ npm i @uiw/react-textarea-code-editor
[![Open in Github gh-pages](https://img.shields.io/badge/Open%20In-Github%20gh--pages-blue?logo=github)](https://uiwjs.github.io/react-textarea-code-editor/)

```jsx
import CodeEditor from '@uiw/react-textarea-code-editor';
import CodeEditor from 'react-textarea-code-editor-2';

function App() {
const [code, setCode] = React.useState(
Expand Down Expand Up @@ -57,7 +57,7 @@ Use examples in nextjs. [#31](https://github.com/uiwjs/react-textarea-code-edito

```bash
npm install next-remove-imports
npm install @uiw/react-textarea-code-editor@v1.4.4
npm install react-textarea-code-editor-2@v1.4.4
```

```js
Expand All @@ -71,10 +71,10 @@ module.exports = removeImports({
```jsx
import React from "react";
import dynamic from "next/dynamic";
import "@uiw/react-textarea-code-editor/dist.css";
import "react-textarea-code-editor-2/dist.css";

const CodeEditor = dynamic(
() => import("@uiw/react-textarea-code-editor").then((mod) => mod.default),
() => import("react-textarea-code-editor-2").then((mod) => mod.default),
{ ssr: false }
);

Expand Down Expand Up @@ -106,6 +106,9 @@ export default HomePage;

## Props

See [`refractor.register(syntax)`](https://github.com/wooorm/refractor#refractorregistersyntax) to understand
what to pass to `syntax` prop.

```ts
interface TextareaCodeEditorProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
prefixCls?: string;
Expand All @@ -121,6 +124,10 @@ interface TextareaCodeEditorProps extends React.TextareaHTMLAttributes<HTMLTextA
* The minimum height of the editor. Default: `16`.
*/
minHeight?: number;
/**
* A refractor syntax (Prism language definition) to be registered by refractor. Default: `undefined`.
*/
syntax?: refractor.RefractorSyntax;
}
```

Expand Down
15 changes: 8 additions & 7 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@uiw/react-textarea-code-editor",
"version": "1.4.15",
"name": "react-textarea-code-editor-2",
"version": "1.4.17",
"description": "A simple code editor with syntax highlighting.",
"homepage": "https://uiwjs.github.io/react-textarea-code-editor/",
"main": "cjs/index.js",
Expand Down Expand Up @@ -65,9 +65,10 @@
"react-dom": ">=16.9.0"
},
"dependencies": {
"@babel/runtime": "7.16.7",
"@mapbox/rehype-prism": "0.8.0",
"rehype": "12.0.0"
"@babel/runtime": ">=7.10.0",
"@types/refractor": "^3.0.2",
"rehype": "12.0.0",
"rehype-prism-2": "^0.8.1"
},
"devDependencies": {
"@kkt/less-modules": "7.0.4",
Expand All @@ -77,8 +78,8 @@
"@types/react-dom": "17.0.11",
"@types/react-test-renderer": "17.0.1",
"@uiw/react-github-corners": "1.5.3",
"@uiw/react-markdown-preview": "3.4.6",
"@uiw/react-loader": "4.9.7",
"@uiw/react-markdown-preview": "3.4.6",
"code-example": "3.3.1",
"compile-less-cli": "1.8.11",
"husky": "7.0.4",
Expand All @@ -88,7 +89,7 @@
"react": "17.0.2",
"react-dom": "17.0.2",
"react-test-renderer": "17.0.2",
"tsbb" :"3.5.4"
"tsbb": "3.5.4"
},
"eslintConfig": {
"extends": [
Expand Down
7 changes: 7 additions & 0 deletions src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
import refractor from 'refractor';
import { processHtml, htmlEncode } from './utils';
import shortcuts from './shortcuts';
import * as styles from './styles';
Expand All @@ -20,6 +21,10 @@ export interface TextareaCodeEditorProps extends React.TextareaHTMLAttributes<HT
* The minimum height of the editor. Default: `16`.
*/
minHeight?: number;
/**
* A refractor syntax (Prism language definition) to be registered by refractor. Default: `undefined`.
*/
syntax?: refractor.RefractorSyntax;
}

export default React.forwardRef<HTMLTextAreaElement, TextareaCodeEditorProps>((props, ref) => {
Expand All @@ -28,6 +33,7 @@ export default React.forwardRef<HTMLTextAreaElement, TextareaCodeEditorProps>((p
value: _,
padding = 10,
minHeight = 16,
syntax = undefined,
placeholder,
language,
className,
Expand All @@ -54,6 +60,7 @@ export default React.forwardRef<HTMLTextAreaElement, TextareaCodeEditorProps>((p
`<pre aria-hidden=true><code ${language ? `class="language-${language}"` : ''} >${htmlEncode(
String(value || ''),
)}</code><br /></pre>`,
syntax,
),
[value, language],
);
Expand Down
7 changes: 4 additions & 3 deletions src/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import { rehype } from 'rehype';
// @ts-ignore
import rehypePrism from '@mapbox/rehype-prism';
import rehypePrism from 'rehype-prism-2';
import refractor from 'refractor';

export const processHtml = (html: string) => {
export const processHtml = (html: string, syntax: refractor.RefractorSyntax | undefined) => {
return rehype()
.data('settings', { fragment: true })
.use(rehypePrism, { ignoreMissing: true })
.use(rehypePrism, { ignoreMissing: true, syntax: syntax })
.processSync(`${html}`)
.toString();
};
Expand Down