react-highlight-within-textarea - GitLite

KO | EN

gitlite — search

#python #react #machine-learning #rust #deep-learning #docker #nodejs #java #awesome #cli #awesome-list #vue #pytorch #ios

react-highlight-within-textarea

(★ 104)

React component for highlighting bits of text within a textarea

파일 탐색기

최종 버전 다운로드 (.zip)

- - codeql-analysis.yml
  - yarn-test.yml
- act-event.json
- dependabot.yml
- launch.json
- tasks.json
- - favicon-128x128.png
  - favicon-16x16.png
  - favicon-32x32.png
  - favicon-96x96.png
  - favicon.ico
  - index.css
  - index.html
  - manifest.json
  - robots.txt
- - App.css
  - App.tsx
  - Array.tsx
  - ChangeSelection.tsx
  - ChangeValue.tsx
  - Code.tsx
  - CodeSandbox.tsx
  - Component.tsx
  - CustomObject.tsx
  - DraftPerf.tsx
  - Example.tsx
  - index.tsx
  - logo.svg
  - NavBar.tsx
  - Performance.tsx
  - QuillPerf.tsx
  - Range.tsx
  - react-app-env.d.ts
  - Regexp.tsx
  - setupTests.ts
  - setupTests.tsx
  - StrategyDemo.tsx
  - String.tsx
  - Unwrapped.tsx
- .env
- package.json
- tsconfig.json
- breakSpansByBlocks.ts
- createDecorator.ts
- DecoratorFactory.tsx
- getMatches.ts
- getType.tsx
- highlightToFlatStrategy.ts
- HighlightWithinTextarea.tsx
- HighlightWithinTextareaCC.tsx
- index.ts
- Selection.tsx
- types.d.ts
.actrc
.gitignore
.travis.yml
CONTRIBUTING.md
DEVELOP.md
HISTORY.md
package.json
README.md
tsconfig.json
yarn.lock

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/bonafideduck/react-highlight-within-textarea

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd react-highlight-within-textarea

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install --save react-highlight-within-textarea

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm install --save draft-js

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

yarn add react-highlight-within-textarea

이 명령어를 터미널에 그대로 입력해 실행하세요.

yarn add draft-js

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# react-highlight-within-textarea

> React component for highlighting spans of text within a textarea

[![NPM](https://img.shields.io/npm/v/react-highlight-within-textarea.svg)](https://www.npmjs.com/package/react-highlight-within-textarea) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) ![Yarn Test](https://github.com/bonafideduck/react-highlight-within-textarea/workflows/Yarn%20Test/badge.svg)

## Install

```bash
npm install --save react-highlight-within-textarea
npm install --save draft-js
```
```
yarn add react-highlight-within-textarea
yarn add draft-js
```

Note: This has a peer dependency of draft-js.

## Usage

```jsx
import React from 'react';
import { useState } from 'react';
import { HighlightWithinTextarea } from 'react-highlight-within-textarea'

const Example = () => {
  const [value, setValue] = useState("X Y Z and then XYZ");
  const onChange = (value) => setValue(value);
  return (
    <HighlightWithinTextarea
      value={value}
      highlight={/[XYZ]/g}
      onChange= {onChange}
    />
  );
};
```

The highlight property accepts several different types of values to describe 
what will be highlighted.  You can see the various ways to highlight things, 
along with example code, on the 
[documentation and demo page](https://bonafideduck.github.io/react-highlight-within-textarea/).

## Properties

The following properties are used directly by this library.  Additional properties are passed 
unmodified directly to the [Draft.js](https://draftjs.org) [Editor Component](https://draftjs.org/docs/api-reference-editor).

**value**: This can either be the text value or a DraftJs [EditorState](https://draftjs.org/docs/api-reference-editor-state/#internaldocs-banner).

**onChange**: This is called whenever the text value or selection changes.  You must update value to accept this change.  You only have to set the selection property if you want to change the current selection.

**highlight**: This specifies what to highlght.  For more info, see the
[demo page](https://bonafideduck.github.io/react-highlight-within-textarea/).

**selection**: A selection containing `anchor` and `focus` that can be use to place the cursor or set selections.

**ref**: This returns a forwardRef to the underlying [Draft.js](https://draftjs.org) [Editor Component](https://draftjs.org/docs/api-reference-editor).

## Properties passed directly to Draft.js Editor Component

The following properties are passed unmodified directly to the [Draft.js](https://draftjs.org) [Editor Component](https://draftjs.org/docs/api-reference-editor).

[autoCapitalize](https://draftjs.org/docs/api-reference-editor#autocapitalize)
[autoComplete](https://draftjs.org/docs/api-reference-editor#autocomplete)
[autoCorrect](https://draftjs.org/docs/api-reference-editor#autocorrect)
[editorKey](https://draftjs.org/docs/api-reference-editor#editorkey)
[handleBeforeInput](https://draftjs.org/docs/api-reference-editor#handlebeforeinput)
[handleDrop](https://draftjs.org/docs/api-reference-editor#handledrop)
[handleDroppedFiles](https://draftjs.org/docs/api-reference-editor#handledroppedfiles)
[handleKeyCommand](https://draftjs.org/docs/api-reference-editor#handlekeycommand)
[handlePastedFiles](https://draftjs.org/docs/api-reference-editor#handlepastedfiles)
[handlePastedText](https://draftjs.org/docs/api-reference-editor#handlepastedtext)
[handleReturn](https://draftjs.org/docs/api-reference-editor#handlereturn)
[keyBindingFn](https://draftjs.org/docs/api-reference-editor#keybindingfn)
[onBlur](https://draftjs.org/docs/api-reference-editor#onblur)
[onFocus](https://draftjs.org/docs/api-reference-editor#onfocus)
[placeholder](https://draftjs.org/docs/api-reference-editor#placeholder)
[readOnly](https://draftjs.org/docs/api-reference-editor#readonly)
[spellCheck](https://draftjs.org/docs/api-reference-editor#spellcheck)
[stripPastedStyles](https://draftjs.org/docs/api-reference-editor#strippastedstyles)
[textAlignment](https://draftjs.org/docs/api-reference-editor#textalignment)
[textDirectionality](https://draftjs.org/docs/api-reference-editor#textdirectionality)

## Known and Potential Issues

The following have not yet been verified to work or have issues.

* Form submit might not work.  To be honest, I don't even know how React works with form submit buttons.
* Accessible Rich Internet Applications [ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) may not be supported.
* Reference forwarding probably works, but it hasn't been tested.
* Tab between form elements may not work. I haven't looked into this at all.

## Changes

See [HISTORY.md](https://github.com/bonafideduck/react-highlight-within-textarea/blob/main/HISTORY.md)

## License

MIT © [bonafideduck](https://github.com/bonafideduck)

---

* The 3.0 component was created using [this blog post](https://prateeksurana.me/blog/react-library-with-typescript/) by Prateek Surana.
* The 2.0 component was created using [nwb](https://github.com/insin/nwb)
* This is essentially a wrapper of [Draft.js](https://draftjs.org)
* This component is a port of the [highlight-within-textarea](https://www.npmjs.com/package/highlight-within-textarea) jquery plugin to React.