From e0323a6ec01f1565fb58decc31050810f6e13f39 Mon Sep 17 00:00:00 2001 From: "M. Mert Yildiran" Date: Wed, 12 Jan 2022 16:19:57 +0300 Subject: [PATCH 1/5] Add `syntax` prop to register a new syntax --- README.md | 7 +++++++ package.json | 9 +++++---- src/index.tsx | 7 +++++++ src/utils.ts | 5 +++-- 4 files changed, 22 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index ef5f8b05..8690768c 100644 --- a/README.md +++ b/README.md @@ -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 { prefixCls?: string; @@ -121,6 +124,10 @@ interface TextareaCodeEditorProps extends React.TextareaHTMLAttributes=7.10.0", - "react": ">=16.9.0", + "react": "file:/home/mertyildiran/Documents/up9/mizu/ui/node_modules/react", "react-dom": ">=16.9.0" }, "dependencies": { "@babel/runtime": "7.16.7", - "@mapbox/rehype-prism": "0.8.0", + "@mapbox/rehype-prism": "file:/home/mertyildiran/Downloads/rehype-prism", + "@types/refractor": "^3.0.2", "rehype": "12.0.0" }, "devDependencies": { @@ -85,10 +86,10 @@ "kkt": "7.0.4", "lint-staged": "12.1.5", "prettier": "2.5.1", - "react": "17.0.2", + "react": "file:/home/mertyildiran/Documents/up9/mizu/ui/node_modules/react", "react-dom": "17.0.2", "react-test-renderer": "17.0.2", - "tsbb" :"3.5.4" + "tsbb": "3.5.4" }, "eslintConfig": { "extends": [ diff --git a/src/index.tsx b/src/index.tsx index 247250da..4810f288 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -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'; @@ -20,6 +21,10 @@ export interface TextareaCodeEditorProps extends React.TextareaHTMLAttributes((props, ref) => { @@ -28,6 +33,7 @@ export default React.forwardRef((p value: _, padding = 10, minHeight = 16, + syntax = undefined, placeholder, language, className, @@ -54,6 +60,7 @@ export default React.forwardRef((p ``, + syntax, ), [value, language], ); diff --git a/src/utils.ts b/src/utils.ts index 8968348e..d6a46e7f 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,11 +1,12 @@ import { rehype } from 'rehype'; // @ts-ignore import rehypePrism from '@mapbox/rehype-prism'; +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(); }; From 6a9048663fd388a49e405f07d4975eec7eb6246c Mon Sep 17 00:00:00 2001 From: "M. Mert Yildiran" Date: Thu, 28 Jul 2022 02:33:23 +0300 Subject: [PATCH 2/5] Replace `@mapbox/rehype-prism` with `rehype-prism-2` --- package.json | 6 +++--- src/utils.ts | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 16199b10..9095be0f 100644 --- a/package.json +++ b/package.json @@ -61,12 +61,12 @@ }, "peerDependencies": { "@babel/runtime": ">=7.10.0", - "react": "file:/home/mertyildiran/Documents/up9/mizu/ui/node_modules/react", + "react": ">=16.9.0", "react-dom": ">=16.9.0" }, "dependencies": { "@babel/runtime": "7.16.7", - "@mapbox/rehype-prism": "file:/home/mertyildiran/Downloads/rehype-prism", + "rehype-prism-2": "0.8.0", "@types/refractor": "^3.0.2", "rehype": "12.0.0" }, @@ -86,7 +86,7 @@ "kkt": "7.0.4", "lint-staged": "12.1.5", "prettier": "2.5.1", - "react": "file:/home/mertyildiran/Documents/up9/mizu/ui/node_modules/react", + "react": "17.0.2", "react-dom": "17.0.2", "react-test-renderer": "17.0.2", "tsbb": "3.5.4" diff --git a/src/utils.ts b/src/utils.ts index d6a46e7f..28808955 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,6 +1,6 @@ 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, syntax: refractor.RefractorSyntax | undefined) => { From 3a2b45d7e2db8f3248b896a0ea2f533fe2327996 Mon Sep 17 00:00:00 2001 From: "M. Mert Yildiran" Date: Thu, 28 Jul 2022 02:36:37 +0300 Subject: [PATCH 3/5] Rename package from `@uiw/react-textarea-code-editor` to `react-textarea-code-editor-2` --- .github/workflows/ci.yml | 4 ++-- README.md | 12 ++++++------ package.json | 2 +- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 90842989..08221009 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -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 }} diff --git a/README.md b/README.md index 8690768c..780f1487 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ 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/@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. @@ -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 @@ -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( @@ -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 @@ -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 } ); diff --git a/package.json b/package.json index 9095be0f..98a17348 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "@uiw/react-textarea-code-editor", + "name": "react-textarea-code-editor-2", "version": "1.4.15", "description": "A simple code editor with syntax highlighting.", "homepage": "https://uiwjs.github.io/react-textarea-code-editor/", From f5606982de9172b0e7bbf0ea84cbdf29a28ffc15 Mon Sep 17 00:00:00 2001 From: "M. Mert Yildiran" Date: Thu, 28 Jul 2022 03:22:33 +0300 Subject: [PATCH 4/5] Bump the version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 98a17348..309425c0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-textarea-code-editor-2", - "version": "1.4.15", + "version": "1.4.16", "description": "A simple code editor with syntax highlighting.", "homepage": "https://uiwjs.github.io/react-textarea-code-editor/", "main": "cjs/index.js", From bacd8e40eea6edf4759351b95e9e115fa758157a Mon Sep 17 00:00:00 2001 From: "M. Mert Yildiran" Date: Thu, 28 Jul 2022 03:47:02 +0300 Subject: [PATCH 5/5] Bump --- package.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 309425c0..e41ccaef 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-textarea-code-editor-2", - "version": "1.4.16", + "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", @@ -65,10 +65,10 @@ "react-dom": ">=16.9.0" }, "dependencies": { - "@babel/runtime": "7.16.7", - "rehype-prism-2": "0.8.0", + "@babel/runtime": ">=7.10.0", "@types/refractor": "^3.0.2", - "rehype": "12.0.0" + "rehype": "12.0.0", + "rehype-prism-2": "^0.8.1" }, "devDependencies": { "@kkt/less-modules": "7.0.4", @@ -78,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",